PDA

View Full Version : ExtJS 4 vertically fit container



eternasparta
12 Sep 2013, 8:29 AM
I've two nested container and I wanto to fit vertically (only vertically) the first container to the page size, and the second container to the first container size.
In case of resize of the page all containers should resize themselves automatically.
I'm not able to do this feature. I think that is a layout problem.
This is my sample code and my jsfiddle:



Ext.onReady(function() {
myPanel = Ext.create('Ext.container.Container', {
layout:'fit',
/*style: {
height: '95%',
marginBottom: '10px'
},*/
flex:1,
width:100,
renderTo: Ext.getBody(),
items: [{
xtype:'container',
layout : {
type : 'vbox',
align : 'stretch'


},
items:[
{
//this is the right panel not collapsible
xtype : 'panel',
border:true,
//hidden:false,
bodyBorder:true,
padding: '5 5 5 5',

itemId:'right',

//default layout of inner element is hbox
layout : {
type : 'hbox',
//align : 'stretch'


},


//takes all possible space
flex : 1
}]}



]
});
});



http://jsfiddle.net/eternasparta/yxeSG/
thank you all!

slemmon
16 Sep 2013, 4:04 PM
I'm not totally sure I'm understanding what you're looking to do. You want a container with two vertically aligned components in it - each taking up 100% of the available space? Is that right?