ldb68 Posted September 24, 2015 Posted September 24, 2015 Using DBGrid Editors demo as starting point. How can set the width of the detail panel editor and / or change element size? Can we align panel at left? Search inside code but I don't find where you create the detail panel. thanks
Administrators Farshad Mohajeri Posted October 1, 2015 Administrators Posted October 1, 2015 Editor width is hard coded in Sencha Touch code but I can add a property to adjust field label widths.
Sherzod Posted October 2, 2015 Posted October 2, 2015 Hi, As said Farshad, "Editor" hard coded in Sencha Touch code ..and I think in the next versions of these params will be available in the properties..While, you can like this.. Ext.grid.plugin.Editable.override({onTrigger: function(g) { var i = this, a = i.getGrid(), k = i.getFormConfig(), c = i.getToolbarConfig(), d = i.getRecordByTriggerEvent(g), f, b, h, j; if (d) { if (k) { this.form = b = Ext.factory(k, Ext.form.Panel) } else { this.form = b = Ext.factory(i.getDefaultFormConfig()); f = i.getEditorFields(a.getColumns()); b.down("fieldset").setItems(f) } b.setRecord(d); j = Ext.factory(c, Ext.form.TitleBar); j.down("button[action=cancel]").on("tap", "onCancelTap", this); j.down("button[action=submit]").on("tap", "onSubmitTap", this); this.sheet = h = a.add({ xtype: "sheet", items: [j, b], hideOnMaskTap: true, enter: "left", // <---------- default "enter: "right"" exit: "left", // <---------- default "enter: "right"" left: 0, // <---------- default "right: 0" width: 320, // <---------- default "width: 320" layout: "fit", stretchY: true, hidden: true }); if (i.getEnableDeleteButton()) { b.add({ xtype: "button", text: "Delete", ui: "decline", margin: 10, handler: function() { a.getStore().remove(d); h.hide() } }) } h.on("hide", "onSheetHide", this); h.show(); // Additionally added... width of the "label" as a percentage of the "total" width // default 30% Ext.select('#'+a.id+' .x-form-label').elements.forEach(function(el){el.style["width"]="40%"}); }} }) * you can add this code to window.beforeInit and you can use different combinations of animations ("enter", "exit"): left, right, top, bottom... Try, Best regards.
Sherzod Posted October 2, 2015 Posted October 2, 2015 Note: it is a workaround not a preferred solution ! Best regards!
ldb68 Posted October 2, 2015 Author Posted October 2, 2015 Note: it is a workaround not a preferred solution ! Best regards! Thanks. I'm doing some test and seems ok. Is there any downside to this solution?
ldb68 Posted October 2, 2015 Author Posted October 2, 2015 Editor width is hard coded in Sencha Touch code but I can add a property to adjust field label widths. Ok thanks. The native editor is very usefull to build simple interface to configuration tables and speed up the coding.
Sherzod Posted October 2, 2015 Posted October 2, 2015 Is there any downside to this solution? Hi, It may break compatibility with future versions.. Best regards.
Recommended Posts