ldb68 Posted September 24, 2015 Share 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 Link to comment Share on other sites More sharing options...
ldb68 Posted September 30, 2015 Author Share Posted September 30, 2015 ping ... thanks Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted October 1, 2015 Administrators Share Posted October 1, 2015 Editor width is hard coded in Sencha Touch code but I can add a property to adjust field label widths. Link to comment Share on other sites More sharing options...
Sherzod Posted October 2, 2015 Share 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. Link to comment Share on other sites More sharing options...
Sherzod Posted October 2, 2015 Share Posted October 2, 2015 Note: it is a workaround not a preferred solution ! Best regards! Link to comment Share on other sites More sharing options...
ldb68 Posted October 2, 2015 Author Share 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? Link to comment Share on other sites More sharing options...
ldb68 Posted October 2, 2015 Author Share 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. Link to comment Share on other sites More sharing options...
Sherzod Posted October 2, 2015 Share Posted October 2, 2015 Is there any downside to this solution? Hi, It may break compatibility with future versions.. Best regards. Link to comment Share on other sites More sharing options...
Recommended Posts