PDA

View Full Version : Help with layout - VBox with two grids set to resizable: true, not resizing.



JamieMason
25 Aug 2011, 6:55 AM
Video here: http://dl.dropbox.com/u/12326563/vboxresize.mov

I have a VBox containing two grids, I want them to start with a size set by the flex values of 1 and 2 - then be resizable from there on by using the handles. The handles appear fine but the elements don't resize.

What am I doing wrong please? Thanks!


{ xtype: 'container',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'gridpanel',
id: 'availableBatches',
resizable: true,
resizeHandles: 's',
title: 'Available Batches',
region: 'north',
flex: 2,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Name'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Batch Count'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Description'
}
],
viewConfig: {


}
},
{
xtype: 'gridpanel',
resizable: true,
resizeHandles: 'n',
title: 'My Batches',
region: 'center',
flex: 1,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Item Count'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Complete'
}
],
viewConfig: {


}
}
]
}

mitchellsimoens
25 Aug 2011, 10:49 AM
VBox won't allow you to do this. The layout will manage the height and width (since you have align: 'stretch')

skirtle
29 Aug 2011, 1:47 AM
Hack:


Ext.create('Ext.container.Container', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
defaults: {
listeners: {
resize: function(resizeChild) {
var cont = resizeChild.ownerCt;

// Need this because the doLayout() call also fires resize
if (cont.doingResize) {
return;
}

cont.doingResize = true;

// Easier way to do this?
var otherChild = Ext.Array.remove([cont.getComponent(0), cont.getComponent(1)], resizeChild)[0];

resizeChild.flex = null;
otherChild.flex = 1;

cont.doLayout();

cont.doingResize = false;
}
}
},
items: [
{
flex: 1,
resizable: true,
resizeHandles: 's',
title: 'P1'
}, {
flex: 1,
resizable: true,
resizeHandles: 'n',
title: 'P2'
}
],
layout: {
align: 'stretch',
type: 'vbox'
}
});

JamieMason
2 Sep 2011, 4:57 AM
Sorry for the slow reply guys, I appreciate your help. Marking as answered.