PDA

View Full Version : Orientation change re arrange items in a panel



kfelix18
5 Jan 2011, 2:21 PM
I would like to re arrange items in a panel called ' contentarea' when orientation changes. Please help if you can. Thanks.
Ext.setup({
//Application Parameters
tabletStartupScreen: 'ipadstartup.png',
icon: 'icon.png',
glossOnIcon: true,
onReady: function(){

var banner = new Ext.Panel({
cls:'title',
height:65,
style:'background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#8D020A)) !important;',
dock:'top',
layout:{
type:'hbox',
align:'stretch'
},
items: [leftbanner,centerbanner,rightbanner]
});


var datebg = new Ext.Panel({
cls:'bgdate',
height:35,
dock:'top',

layout:{
type:'hbox',
pack: 'end'
},
items:[srcname,dateinline,refresh]
});


// Portrait first content area
var p1stcontentarea = new Ext.Panel({
height:500,
style:'background-color:#FF00FF',
dock:'top',
html:'Portrait mode first aread'
});
//portrait first thumbnails
var p1stthumbnailrea = new Ext.Panel({
height:202,
style:'background-color:#00FF00',
dock:'top',
html:'portrait mode first thumnails area'
});
//portrait second thumbnails
var p2ndthumbnailarea = new Ext.Panel({
height:202,
style:'background-color:#FF0000',

html:'portrait mode second thumbnail area'
});

//landscape first thumbnails on the right side
var rightl = {
dock:'right',
style:'background-color:#00FF00',
width:256,
height:400,
html:'lanscape rightside'
};
//Landscape first content area leftside
var leftl = {
dock:'top',
width:768,
style:'background-color:#0000FF',
height:400,
html:'lanscape left ride',
dockedItems:[rightl]
};


//landscape footer/second thumbnails
var footer = {
height:248,
width:1024,
dock:'bottom',
style:'background-color:#FF0000',
html:'lanscape footer area'
};

//this is the main panel for holding content
var contentarea
if (Ext.Viewport.getOrientation() == 'portrait'){
contentarea = new Ext.Panel({
items:[],
monitorOrientation :true,
dockedItems:[p1stcontentarea,p1stthumbnailrea,p2ndthumbnailarea]
});
} else{
contentarea = new Ext.Panel({
items:[],
monitorOrientation :true,
dockedItems:[footer,leftl]
});
}



// This panel calls the whole program
new Ext.Panel({
fullscreen:true,
margin:0,
style:'background-color:#FFFFFF',
dockedItems: [banner,datebg,contentarea],
items:[],
monitorOrientation :true
});

Ext.EventManager.onOrientationChange(function(){
//I want to put a code here to use a different configuration of contentare
location.reload(true);
});

}

});

kfelix18
5 Jan 2011, 2:29 PM
now all i do is to reload the whole page which is ...........