PDA

View Full Version : How to render 4 auto resizable panels in the 'center' area of border layout ?



samir_ware
11 Jun 2012, 10:49 PM
Hello All
I am stuck with the requirement which is to render 4 equal panel forming + sign in the center area. (Each corner of the + sign will have one panel, I hope this gives fair idea of what I am trying achieve.) . Once the center panel size gets incresed or descrsed, 4 panels should auto resize themselves with the new size.
Can anyone please tell me how to make sizes of these 4 panels equal in such a way that they will cover the center panel and will not leave any space even when the east and west panels are resized i.e.even after the east and west panels are expanded or collapsed, panels in the center area should occupy the entire center region there by re sizing themselves. Is there any out of the box functionality avilable which could help me out. ?



Ext.create('Ext.tab.Panel', { region: 'center', deferredRender: false, activeTab: 0, items: [{ title: 'Center Panels', autoScroll: true, layout: { type: 'table', columns: 2, tdAttrs: { style: 'padding:2px' } }, defaults: {frame:true, width:300, height: 400}, items:[{ xtype : 'panel', title:'Item 1', html:'100% 20%' },{ title:'Item 2', html:'50% 30%' },{ title:'Item 4', html:'50% 30%' },{ title:'Item 5', html:'50% 30%' }] }] })] });
Thanks in advance
Samir

tobiu
12 Jun 2012, 12:38 AM
with the new borderlayout in 4.1 you can add as many north, south, east and west regions as you like, which already could solve your issue.

however, if you want to put everything into the center region, you could simply put in a container with a vbox layout and 2 containers inside with the hbox layout (or vize versa). if you give all items the flex:1 config, you are already done.

samir_ware
12 Jun 2012, 2:57 AM
Hello Tobiu
Thanks for the reply. I tried what you mentioned in your last mail. Though it did not work for me. Can you please point me to any example which is more or less similar to what I am trying to do ? That will be great great help.
thanks
samir

scottmartin
12 Jun 2012, 8:16 AM
Please post your code so we can have a look. A small working example would be helpful instead code snippets.

Scott.

samir_ware
12 Jun 2012, 11:07 PM
Hello Scott
Thanks a lot for the reply. Here is the working code.



Ext.onReady(function() {
Ext.create('Ext.Viewport', {
title: 'Table Layout',
layout : 'fit',
padding:'5',
flex :1,
items : [{
title:'Outer Container',
layout: {
type: 'table',
columns: 2
},
defaults: {frame:true, width:200, height: 200},
items : [{
title : 'sub 1'
},{
title : 'sub 2'
},{
title : 'sub 4'
},{
title : 'sub 5'
}]

}]
});
});


In the above code I have used table layout to render 4 panels in the "Outer Container" the way I need them to render. The only problem here is that the four panel need to cover the entier area of "Outer Panel" which is not done yet. I could specify width and lenght of the inner panels (viz sub1,sub2,sub4 and sub5) in such a way that they will cover the entire region of the "Outer Panel" though I dont want to hard code it as there are chances that I can make the "Outer Panel" resizable in which case the logic will fail.
So can you please tell me is there any way by which 4 small panels will auto adjust their height and width when the size of the "Outerr Panel" gets changed.
Thanks in advance
Samir

samir_ware
12 Jun 2012, 11:09 PM
In addition I can as well calculate the height and width of the "Outer Region" at runtime and accordingly assign height and width for the inner 4 panels. Though it does not sound a good option to me. I was actually looking for some sophisticated way to do it.
Thanks
Samir

scottmartin
13 Jun 2012, 11:55 AM
As mentioned by Tobias, you can use the following approach:



Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
align: 'stretch',
type: 'vbox'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1,
items: [
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
}
]
},
{
xtype: 'container',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1,
items: [
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
}
]
}
]
});

me.callParent(arguments);
}

});

Ext.create('MyApp.view.MyViewport', {});


Regards,
Scott.?

samir_ware
13 Jun 2012, 8:08 PM
Kool...that resolves my issue...thank a ton Scott.