forms - panel hide when collapse in extjs -
i try explain problem. have tab panel. in 1 tab have form panel , grid panel, both collapsable. when collapse form panel collapse, when collapse gridpanel both collapsed. when uncollapse 1 of 2 panels other 1 disappears. be?
ext.define('myapp.view.tms', { extend: 'ext.container.viewport', id: 'tmsviewport', layout: { type: 'border' }, initcomponent: function () { var me = this; ext.applyif(me, { items: [{ xtype: 'tabpanel', id: 'maintab', activetab: 0, region: 'center', items: [{ xtype: 'panel', id: 'configurationtab', title: 'configuration', items: [{ xtype: 'tabpanel', id: 'configurationvehicles', title: 'configuration', activetab: 0, items: [{ xtype: 'panel', id: 'configurationdrivers', collapsed: false, title: 'drivers', items: [{ xtype: 'form', floating: false, height: 400, id: 'configurationdriversconfiguration', itemid: 'configurationdriversconfiguration', bodypadding: 10, animcollapse: false, collapsed: false, collapsible: true, title: 'driver configuration', items: [{ xtype: 'button', id: 'configurationdriversadd', text: 'add' }, { xtype: 'button', id: 'configurationdriversdelete', text: 'delete' }, { xtype: 'textfield', id: 'configurationdriverscode', fieldlabel: 'driver code' }, { xtype: 'textfield', id: 'configurationdriversname', fieldlabel: 'driver name' }, { xtype: 'textfield', id: 'configurationdriverslicense', fieldlabel: 'driver license nr' }, { xtype: 'textfield', id: 'configurationdriversgivenname', fieldlabel: 'driver given name' }, { xtype: 'textfield', id: 'configurationdriversfamilyname', fieldlabel: 'driver familiy name' }, { xtype: 'textfield', id: 'configurationdriversphone', fieldlabel: 'driver phone nr' }, { xtype: 'textfield', id: 'configurationdriversemail', fieldlabel: 'driver email' }, { xtype: 'combobox', id: 'configurationdriversprovider', fieldlabel: 'provider', displayfield: 'name', store: 'comboproviders', valuefield: 'id' }, { xtype: 'textareafield', id: 'configurationdriversmemo', fieldlabel: 'memo' }, { xtype: 'button', handler: function (button, event) { var form = document.forms; ext.messagebox.alert('submitted values', form.getvalues(true)); }, height: 37, id: 'configurationdriverssave', text: 'save' }] }, { xtype: 'gridpanel', height: 300, id: 'configurationdriversgrid', itemid: 'configurationdriversgrid', animcollapse: false, collapsible: true, title: 'drivers', store: 'griddrivers', viewconfig: { }, columns: [{ xtype: 'gridcolumn', dataindex: 'id', text: 'id' }, { xtype: 'gridcolumn', dataindex: 'version', text: 'version' }, { xtype: 'gridcolumn', dataindex: 'driverid', text: 'driverid' }, { xtype: 'gridcolumn', dataindex: 'firstname', text: 'firstname' }, { xtype: 'gridcolumn', dataindex: 'middlename', text: 'middlename' }, { xtype: 'gridcolumn', dataindex: 'lastname', text: 'lastname' }, { xtype: 'gridcolumn', dataindex: 'email', text: 'email' }, { xtype: 'gridcolumn', dataindex: 'workphone', text: 'workphone' }, { xtype: 'gridcolumn', dataindex: 'note', text: 'note' }, { xtype: 'gridcolumn', dataindex: 'licensenumber', text: 'licensenumber' }, { xtype: 'gridcolumn', dataindex: 'providerid', text: 'providerid' }] }] }] }] }] }] }); me.callparent(arguments); } });
it's hard without having fiddle or simpler sample, looking @ code noticed 1 interesting thing:
you have layout: border on top level , have many nested panels inside. try define border layout in container contains 2 panels collapsing.
Comments
Post a Comment