slemmon
29 Aug 2011, 6:28 PM
I'm having trouble with placeholder. I set it for the south panel and it's ok. I set it for a west or east panel and it collapsed to 4 pixels.
You can take the code below and drop it right into the border layout's editable space in the API docs to see what it does.
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5',
collapsible: true,
placeholder: Ext.widget('toolbar', {
items: [{
xtype: 'tool'
, type: 'close'
}]
})
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
placeholder: Ext.widget('toolbar', {
items: [{
xtype: 'tool'
, type: 'close'
}]
})
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
You can take the code below and drop it right into the border layout's editable space in the API docs to see what it does.
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5',
collapsible: true,
placeholder: Ext.widget('toolbar', {
items: [{
xtype: 'tool'
, type: 'close'
}]
})
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
placeholder: Ext.widget('toolbar', {
items: [{
xtype: 'tool'
, type: 'close'
}]
})
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});