Change a vbox into a hbox and vice versa on orientation change

[paltinescu]

Hi there,

I've built a horizontally scrollable hbox layout container, docked on top, filled with other sub-containers, which I want to transform into a vbox layout (scrollable vertically, docked to the left) on orientation change.

Right now I'm doing something like this on resize:

var hboxLayout = Ext.getCmp('hboxLayoutID');
Ext.getCmp('hboxLayoutParentID').removeAll(false, true);

if(Ext.Viewport.getOrientation()=='landscape'){
    hboxLayout.setDocked('left');
    hboxLayout.setLayout({
            pack: 'center', 
            type: 'vbox'
        });
    hboxLayout.setScrollable({
            direction: 'vertical'
        });
    hboxLayout.setHeight('auto');
    hboxLayout.setWidth(100);
}else{
    hboxLayout.setDocked('top');
    hboxLayout.setLayout({
            pack: 'center', 
            type: 'hbox'
        });
    hboxLayout.setScrollable({
            direction: 'horizontal'
        });
    hboxLayout.setHeight(100);
    hboxLayout.setWidth('');
};
Ext.getCmp('hboxLayoutParentID').add([hboxLayout]);

It kinda does what it's supposed to (it snaps to the left / top, becomes vertically / horizontally scrollable, sets the correct width / height), EXCEPT re-aligning the sub-containers properly - they either remain aligned horizontally (if the initial view was landscape) or vertically (for initial portrait view).

Am I missing something / doing something wrong?

[mitchellsimoens]

Changing layout on the fly is not currently supported.

[Kurt001]

You could rebuild the view onOrientationChange like this:

xtype: 'container',
layout: {    
    pack: 'center',
    type: Ext.Viewport.getOrientation()=='landscape' ? 'vbox' : 'hbox'
}

Rebuilding usually can be done on the fly without any interruptions.

[paltinescu]

Changing layout on the fly is not currently supported.

So what are you suggesting in such a situation, then? To dispose and recreate the hboxLayoutParentID container (from my example above) on every orientationchange event?

[Kurt001]

No. 1:
You may create two views and show the other view on the fly (destroying the first if you need to)

No. 2:
You create two containers in the main container. One with hbox and the other with vbox.
Then you transfer the content to the other container as needed.

The second is especially good if you have forms and do not want to loose the selections/entered text.

[paltinescu]

No. 2:
You create two containers in the main container. One with hbox and the other with vbox.
Then you transfer the content to the other container as needed.

This was actually a really good suggestion, and I've finally made my container behave (pretty much) the way I wanted. Thanks!