PDA

View Full Version : Change Ext.Panel layout on orientation change



Plastic
22 Oct 2010, 7:22 AM
I'm trying to make an Ext.Panel that has a 'vbox' layout when the phone is on portrait and a 'hbox' layout if i rotate it on lanscape mode...

Any suggestion??

This is my code:

Ext.setup({
tabletStartupScreen: 'resources/img/tablet_startup.png',
phoneStartupScreen: 'resources/img/phone_startup.png',
icon: 'resources/img/icon.png',
glossOnIcon: false,
onReady: function() {
vDataIta = new Ext.Panel({
cls: 'card',
html : 'Vdata'
});
grafIta = new Ext.Panel({
cls: 'card',
html : 'Graf'
});
hDataIta = new Ext.Panel({
cls: 'card',
html : 'Hdata'
});

dIta = new Ext.Panel({
title: 'dIta',
fullscreen: true,
layout: {
type: Ext.orientation == 'landscape'? 'hbox' : 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [vDataIta, grafIta, hDataIta]
});


navigationBar = new Ext.TabPanel({
ui: 'light',
dock: 'top',
fullscreen: true,
items: [dIta]
});
Ext.EventManager.onWindowResize(setOrientation);
if (Ext.is.Phone) {
if (Ext.orientation == 'portrait') {
this.vDataIta.show(true);
this.hDataIta.hide(true);
}
else {
this.vDataIta.hide(true);
this.hDataIta.show(true);
}
}
}
});

function setOrientation(){
if (Ext.is.Phone) {
if (Ext.orientation == 'portrait') {
this.vDataIta.show(true);
this.hDataIta.hide(true);
}
else {
this.vDataIta.hide(true);
this.hDataIta.show(true);
}
this.dIta.doComponentLayout();
}
}

I need that in portrait mode on dIta Panel just vDataIta and GrafIta are visible in a vbox layout and when i rotate on lanscape mode just GrafIta and hDataIta are visible in a hbox layout...

Is it possible?

Plastic
22 Oct 2010, 10:24 AM
I Made dIta as a TabPanel cause after i solve this issue i have to duplicate it on 2 tabs more..

Plastic
23 Oct 2010, 5:06 PM
Up!!

YYSAM
30 May 2011, 12:47 AM
I have this requirement too, but I don't think your method is good way to resolve this kind of issue. As some times, user changes some status of components in "landscape" model, some things are changed. Then user change this model as "portrait" , our layout from "hbox" to "vbox" and you must update the status from original component to duplicated component too.
In my cases, my sub panels are very complex and hard to update all status of component(include all sub panels) from "landscape" to "portrait". I really need sencha team can give us one solution that can change the layout from "hbox" to 'vbox" on runtime to resolve this issue.