PDA

View Full Version : ExtJS VBox layout troubles (also resizable panel problems)



marco.napetti
22 Apr 2014, 6:56 AM
I'm having big problems with a vertical layout panel.
I could partially solve those problems, setting the layout to auto, but the panel still doesn't resize correctly.

I have a dynamically composed application, so I can't show you the exact application output, but a valid example could be this:

Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "Viewport",
layout: 'fit',
renderTo: document.body,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom'
}],
items: [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Tree',
collapsible: true,
flex: 1,
region: 'west'
}, {
xtype: 'panel',
layout: 'border',
flex: 5,
region: 'center',
items: [{
xtype: 'panel',
title: 'Grid',
region: 'center',
flex: 5
}, {
xtype: 'panel',
region: 'east',
resizable: true,
layout: 'vbox',
flex: 1,
dockedItems: [{
xtype: 'toolbar',
dock: 'top'
}],
items: [{
xtype: 'panel',
title: 'Detail 1',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 2',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 3',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 4',
collapsible: true
}]
}]
}]
}]
});

As you can see, with the vbox layout nothing is displayed inside the east panel but, if you comment out the layout property, contents are displayed correctly but you still can't resize it right.

Anyone has ever experienced this problem?

Bleak
22 Apr 2014, 9:00 AM
Just a quick glance, but try adding the layout with align: 'stretch'; And add a flex on each of the child panels.. i.e flex: 1,



Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "Viewport",
layout: 'fit',
floating: true,
renderTo: document.body,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom'
}],
items: [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Tree',
collapsible: true,
flex: 1,
region: 'west'
}, {
xtype: 'panel',
layout: 'border',
flex: 5,
region: 'center',
items: [{
xtype: 'panel',
title: 'Grid',
region: 'center',
flex: 5
}, {
xtype: 'panel',
region: 'east',
resizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
dockedItems: [{
xtype: 'toolbar',
dock: 'top'
}],
items: [{
xtype: 'panel',
title: 'Detail 1',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 2',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 3',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 4',
collapsible: true
}]
}]
}]
}]});

marco.napetti
22 Apr 2014, 11:26 PM
Just a quick glance, but try adding the layout with align: 'stretch'; And add a flex on each of the child panels.. i.e flex: 1,



Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "Viewport",
layout: 'fit',
floating: true,
renderTo: document.body,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom'
}],
items: [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Tree',
collapsible: true,
flex: 1,
region: 'west'
}, {
xtype: 'panel',
layout: 'border',
flex: 5,
region: 'center',
items: [{
xtype: 'panel',
title: 'Grid',
region: 'center',
flex: 5
}, {
xtype: 'panel',
region: 'east',
resizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
dockedItems: [{
xtype: 'toolbar',
dock: 'top'
}],
items: [{
xtype: 'panel',
title: 'Detail 1',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 2',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 3',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 4',
collapsible: true
}]
}]
}]
}]});

Ok, the align stretch solves the vbox problem, but the panel resize problem is still present...

marco.napetti
23 Apr 2014, 1:39 AM
I observed the resize problem happens when you use the panel handles, but if you use the border layout handles there isn't problem, so I solved this way:

Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "Viewport",
layout: 'fit',
floating: true,
renderTo: document.body,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom'
}],
items: [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Tree',
collapsible: true,
flex: 1,
region: 'west'
}, {
xtype: 'panel',
layout: 'border',
flex: 5,
region: 'center',
items: [{
xtype: 'panel',
title: 'Grid',
region: 'center',
flex: 5
}, {
xtype: 'panel',
region: 'east',
resizable: {
handles: ''
},
split: true,
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
dockedItems: [{
xtype: 'toolbar',
dock: 'top'
}],
items: [{
xtype: 'panel',
title: 'Detail 1',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 2',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 3',
collapsible: true
}, {
xtype: 'panel',
title: 'Detail 4',
collapsible: true
}]
}]
}]
}]});


Clearly resizable is only about the panel itself, to make the border layout resizable you must use split.