I try to explain my problem. I have a tab panel. In one tab I have a form panel and a grid panel, both collapsable. When I collapse the form panel it will collapse, when I collapse the gridpanel both are collapsed. Now when I uncollapse one of the two panels the other one disappears. What could this 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 to say anything without having a fiddle or some simpler sample, but looking at your code I noticed one interesting thing:
You have
layout: borderonly on the top level and then you have many nested panels inside. Try to defineborderlayout in the container that contains your two panels that are collapsing.