PDA

View Full Version : How to change layout type dynamically?



nagarajan.bose
6 Nov 2010, 6:33 PM
Hi,
I need to display three kinds of view. However the difference in Vertical Box View and Horizontal box view is only the the layout type. The panels included in vbox and hbox.

Is it possible to change the layout type dynamically from vbox to hbox and vice versa?



/*
* ================ Vertical Box View =======================
*/
var vboxView = {
id: 'vbox-panel',
layout: 'hbox',
border:false,
autoScroll:true,
layoutConfig: {
align : 'stretch',
pack : 'start'
}
//Panels added dynamically
};
/*
* ================ Horizontal Box View =======================
*/
var hboxView = {
id: 'hbox-panel',
layout: 'vbox',
border:false,
autoScroll:true,
layoutConfig: {
align : 'stretch',
pack : 'start'
}
//Panels added dynamically
};

// Called inside the viewport center region
var centerView = new Ext.Panel({
id:'asupmainview',
region: 'center',
layout:'card',
layoutConfig: {layoutOnCardChange: true},
activeItem: 0,
border:false,
items:[mergedView, hboxView, vboxView]
})


I tried the following code, however it didn't work. I was looking for some function like layout.setType(""), could not find anything like that.



Ext.getCmp('hbox-panel').layout.type='hbox'; //Change type here
Ext.getCmp('mainLayout').doLayout() //Refreshing the layout

wongpat
6 Nov 2010, 7:36 PM
+1

I too would like to know if that's possible.

Right now, I am stuck using an Ext.Panel that houses a Container that will either contain a single GridPanel or multiple GridPanels (via. either a stack of collapsible panels, accordion, or tabs). Ideally if I can change the layout I wouldn't need this container.

Also, this Ext.Panel is also the 'center' region on a border layout...is it even possible to destroy it and recreate it (of course, assuming the way to go about changing the layout is indeed destroying and recreating the proper layout instead of just destroying the inner container).

Animal
7 Nov 2010, 1:55 AM
You cannot change a layout dyamically.

If you need several different views, you will need to use a 'card' layout Container with several child Components, each of which presents a different view.

For example, to display a detail view and a thumbnail view of an image gallery, you would use a 'card' layout Container (for example a TabPanel is a 'card' layout Container. It just has a built-in card switching UI) which contains as its two children, a GridPanel and a DataView..

wongpat
7 Nov 2010, 3:04 PM
Thanks Animal, though I think in my case I won't be using a CardLayout, since my views are actually for the same underlying data (it's just grid panels with identical data organized in different layouts).

As it seems even after deferredRender, cycling through the CardLayout renders all the DOMs eventually, so I'd like to keep the DOM more lightweight and will do so by destroying the container housing the gridpanels (while preserving the refrence to my array of gridpanels) and recreating another one with a layout based on user-choice.

In other words....



[Main panel with footer information and a toolbar]
/* I destroy this container and recreate it with a user-selected layout */
[Container that is either a TabPanel or an Accordion]
[Grid Panels] // I keep a reference to this

Animal
7 Nov 2010, 10:50 PM
You should use a card layout for that.

Rendering a GridPanel is slow. You don't want to be destroying and recreating+rendering every time you activate a card!

glcdeveloper
15 Jul 2013, 8:35 AM
Hi... i was asking me if card layout would be useful if i have a login panel, and when login is ok, i want to show my main panel with my menu and other options. Card Layout would help me?

Thank you in advance