PDA

View Full Version : Component with HBOX layout and resizable children



icvg
19 Mar 2012, 6:16 AM
Hello,

I have the following structure of components:


{
xtype: 'component',
layout: 'hbox',

items: [
{
xtype: 'component',
itemId: 'child1',
flex: 1,
items: [
{
xtype: 'treepanel'
}
]
},

{
xtype: 'component',
itemId: 'child2',
flex: 1,
items: [
{
xtype: 'gridpanel'
}
]
},

{
xtype: 'component',
itemId: 'child3',
flex: 1,
items: [
{
xtype: 'gridpanel'
}
]
}
]
}


How do I make the children to be resizable? I actually need them initially to be stretched according to their flex property, but then resizable.
Note: I could have more or less than 3 children...

Thanks in advance.

voodoov
19 Mar 2012, 11:04 AM
Hi,

I use 'column' layout for childrens and handle columnWidth with resize and beforeresize events manually (It works like split config in this way):

items: {

xtype: 'container',
layout: 'column',

beforeLayout: function () {
var items = this.layout.getLayoutItems(),
len = items.length,
i = 0,
item;

for (; i < len; i++) {
item = items[i];
item.columnWidth = 1 / len;
}
},

items: [{
id: 'child1',
height: 300,

resizable: {
listeners: {
beforeresize: function (cmp, width, height) {
oldWidth = width;
},
resize: function (cmp, width, height) {
var nextCmpWidth = cmp.getEl().next().getWidth();
Ext.getCmp(cmp.getEl().next().id).setWidth(nextCmpWidth + (oldWidth - width));
}
}
},
resizeHandles: 'e',

items: {
html: 'treepanel'
}
}, {
id: 'child2',

resizable: {
listeners: {
beforeresize: function (cmp, width, height) {
oldWidth = width;
},
resize: function (cmp, width, height) {
var nextCmpWidth = cmp.getEl().next().getWidth();
Ext.getCmp(cmp.getEl().next().id).setWidth(nextCmpWidth + (oldWidth - width));
}
}
},
resizeHandles: 'e',

height: 300,
items: {
html: 'gridpanel'
}
}, {
id: 'child3',
height: 300,
items: {
html: 'gridpanel'
}
}]


}
You can use columnWidth config instead of flex for each column.
If you want 3 columns to have equal widths on runtime depends on their parent, the beforeLayout function above will help you out.

You can do this with border layout (with split config instead of resizable) but it is not easy to add or remove columns dynamically.

Daniil
24 Jul 2012, 4:35 PM
Hi,

Please use Ext.resizer.Splitter to get splitting between HBox items.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.resizer.Splitter (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.resizer.Splitter)