PDA

View Full Version : Collapsible panel can't be opened anymore



extjser12
6 Mar 2012, 5:32 AM
Hello together

When I click on the to button to hide (collapsible) my "FormPanel" or "GridPanel" it removes the component or destroys the layout of them so that you can open it anymore. This problem occurs on both panels. When you close the "FormPanel" you can still see some parts of this component. But if you close the "GridPanel" the component will be hidded/removed completly.
Have a look at my pictures for better understanding.



Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 180,
split: true,
layout: 'fit',
items: [
tree
]
}, {
region: 'center',
border: false,
items:[
FormPanel,
GridPanel
]
}]
});
})

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Menu 1", leaf: true },
{ text: "Menu 2", leaf: true}
]
}
});

var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
width: 180,
listeners: {
scope:this
}
});

var FormPanel = Ext.create('Ext.form.Panel', {
title: 'Form Panel',
collapsible: true,
frame: true,
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Field Label 1'
}, {
xtype: 'textfield',
fieldLabel: 'Field Label 2'
}, {
xtype: 'textfield',
fieldLabel: 'Field Label 3'

}],
buttons: [{
text: 'Button 1'
}]
});

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var GridPanel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
collapsible: true,
height: 800,
forceFit: true,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
});

Can someone help me to fix this?

Thank you very much in advance!

Regards
extjser12

tvanzoelen
6 Mar 2012, 5:47 AM
Can not resolve this one in ext4.1 beta 2. Works fine there. What version do you use?

extjser12
6 Mar 2012, 6:02 AM
Ext JS 4.0.7