PDA

View Full Version : Changing the view on orientation change



Kurt001
10 Jun 2011, 2:25 AM
I am stuck.

Trying to change the orientation of the iphone, I am removing the old panel and trying to add a new panel.
But somehow its not working. Can you help me find the error:

Here is my index.js

Ext.regApplication({
name: 'myDrop',
launch: function() {
myDrop.rootPanel = new Ext.Panel({
fullscreen: true,
layout: "card"
});

Ext.EventManager.onOrientationChange(menu.setOrientation);
if (Ext.is.Phone) {
if (Ext.orientation == 'portrait') {
myDrop.rootPanel.add(view.menu.rootPhoneUp);
myDrop.rootPanel.doLayout();
}
else {
myDrop.rootPanel.add(view.menu.rootPhoneSide);
myDrop.rootPanel.doLayout();
}
}
}
});

menu.setOrientation = function(){
if (!Ext.is.Phone) {
if (Ext.orientation == 'portrait') {
myDrop.rootPanel.removeAll();
myDrop.rootPanel.add(view.menu.rootPhoneUp);
myDrop.rootPanel.doLayout();
alert('portrait'); //not showing up
}
else {
myDrop.rootPanel.removeAll();
myDrop.rootPanel.add(view.menu.rootPhoneSide);
myDrop.rootPanel.doLayout();
alert('landscape'); //not showing up
}

}
}And here are the views:

view.menu.rootPhoneSide = {
layout: "card",
items:
[
{// #1
//Definition of the bottom docked Panel
xtype: 'panel',
itemId: 'buttonList',
cls: 'iphoneMenuBtnPanel',
items:
[
{
html: '<div style="padding-bottom: 45px;">MyName</div>'
},
{// #2
//Definition of the Update button
xtype: 'button',
itemId: 'btnSTART',
cls: 'iphoneMenuBtn',
ui: 'normal',
text: 'START',
// handler: buttonStart
},// #2
]
}// #1
], // items
dockedItems:
[
{// #1
//LEFT
xtype: 'panel',
itemId: 'pnlDockedLeft',
cls: 'iphoneMenuSideLeft',
dock: 'left',
width: 20,
items: [{html: '<img src="resources/images/iphone/logo_quer.png" alt="Logo" />'}]
},// #1
{// #2
//RIGHT
xtype: 'panel',
itemId: 'pnlDockedRightLogo',
cls: 'iphoneMenuSideRight',
dock: 'right',
width: 80,
items:
[
{
html: '<div id="TEST"><img src="resources/images/iphone/dreier_aufrecht.png" alt="Fun" /></div>'
}
]
}// #2
]// Docked Items
};




/**
* Definition of the Root Panel for Up Position
*/
view.menu.rootPhoneUp = {
layout: "card",
items:
[
{// #1
//Definition of the bottom docked Panel
xtype: 'panel',
itemId: 'buttonList',
cls: 'iphoneMenuBtnPanel',
items:
[
{html:"<div>MyName</div>"},
{// #2
//Definition of the Update button
xtype: 'button',
itemId: 'btnSTART',
style: 'margin-top: 45px',
cls: 'iphoneMenuBtn',
ui: 'normal',
text: 'START',
// handler: buttonStart
},// #2
{html: '<div><img src="resources/images/iphone/logo_design.png" alt="Fun" /></div>'}
]
}// #1
], // items
dockedItems:
[
{// #1
//LEFT
xtype: 'panel',
itemId: 'pnlDockedLeft',
cls: 'iphoneMenuUpLeft',
dock: 'left',
width: 30,
items: [{html: '<img src="resources/images/iphone/logo_hoch.png" alt="Logo" />'}]
}// #1
]// Docked Items
};

I also tried in the views:

view.menu.rootPhoneUp = new Ext.Panel({})
But got the same result.

What is wrong?

Can you help?

Best TD