PDA

View Full Version : Change layout parameters



dbottillo
27 Jul 2010, 1:34 AM
Hi,

i'm trying to rearrange a layout after an event of type orientationchange
my goal is to have two different layout for landscape and potrait mode (because a landscape layout is not good in portrait mode and vice versa)

i have a panel with this layout:

var detail = new Ext.Panel({
layout: {
type: 'vbox',
align: 'vertical'
},...

and i want that when i passed to landscape mode my layout have to change type to hbox
i try:

listeners: {
orientationchange: function(p, type){
detail.getLayout().setAttribute("type","hbox");
// detail.getLayout().setType("hbox");
detail.update();
}
}
but both setAttribute and setType didin't work
in documentation i didn't found any methods like setLayout, changeLayout for panel instance!

so how can i change my layout dynamically?

evant
27 Jul 2010, 1:43 AM
You can't, it's not something that's implemented. You'll need to replace it with a new container (or use a card layout).

dbottillo
27 Jul 2010, 2:10 AM
ok great

so i create a new Panel (detail2 with parameters for landscape mode)
and now on the orientationchange event i do
name_container.setCard(2);

my container is:

var name_container = new Ext.Container({
layout: 'card',
items:
[list, detail,detail2]
});

and it work
but there is a little problem...card change but general layout remain portrait!!! so is cut on the right, width of the entire layout remains the same of portrait mode, so i can i reload to use all the space (that in landscape is more than in portrait)?

i try
name_container.update();
detail2.update();
name_container.doLayout();
detail2.doLayout();

but none of this works..!

Thank you

Daniele

dbottillo
27 Jul 2010, 11:52 PM
anyone? :/

evant
28 Jul 2010, 12:07 AM
You have a greater chance of getting an answer if you post something runnable. Little code snippets in isolation aren't really that useful.

dbottillo
28 Jul 2010, 12:23 AM
ok, here we are:

container:

var name_container = new Ext.Container({
layout: 'card',
items:
[list, detail,detail2]
});

detail:

var detail = new Ext.Panel({
layout: {
type: 'vbox',
align: 'vertical'
},
monitorOrientation: 'true',
scroll: 'vertical',
items: [carousel1,{
html: '<div class="descriptionPortait"><span style="font-weight: bold">Description:</span></div>', }],listeners: {
orientationchange: function(p, type){
offerte.setCard(2);
detail2.doLayout();
}
}


and detail2:

var detail = new Ext.Panel({
layout: {
type: 'hbox',
align: 'vertical'
},
monitorOrientation: 'true',
scroll: 'vertical',
items: [carousel2,{
html: '<div class="descriptionLandscape"><span style="font-weight: bold">Description:</span></div>', }],listeners: {
orientationchange: function(p, type){
offerte.setCard(1);
detail1.doLayout();
}
}


so detail1 and detail2 are very similar, what change is the type of layout (hbox and vbox), class name inside html and the orientationchange function

i repeat the problem, if i start application in portrait mode (with my nexus one) and then i rotate my phone, correctly application pass from detail to detail2 but it doesn't refreh the screen...so detail2 is display with the same width of detail (but detail2 should be in landscape mode so width is more then portrait's width)

Thank you

ssdesign
28 Jul 2010, 12:58 AM
Is it a typo error?

Both your vbox and hbox are same variable names:


var detail = new Ext.Panel({
layout: {
type: 'vbox',
align: 'vertical'
},
....

var detail = new Ext.Panel({
layout: {
type: 'hbox',
align: 'vertical'
},
....

dbottillo
28 Jul 2010, 1:03 AM
sorry it's error when i put there
the first is detail and the second detail2, it's not this the error ;)

evant
28 Jul 2010, 2:21 AM
@dbottillo

Again, please post something runnable, that we can just copy and paste and run. If you've gone to as much trouble as to split it up, it won't take much longer to make it runnable!

dbottillo
28 Jul 2010, 2:25 AM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
Ext.regModel('Offer', {
fields: ['name', 'img', 'alt']
});



var list = new Ext.List({
tpl: [
'<br/><tpl for=".">',
'<div class="contact" style="width: 90%; height: 70px; margin: 5px auto; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; padding: 0px; margin-top: -15px;">',
'<div style="width: 90px; float:left">',
'<img src="{img}" style="margin-top: 5px; margin-left: 5px;" alt="{alt}" />',
'</div>',
'<div style="float:left; font-size: 12px">',
'<span style="font-size: 18px; color: darkblue; font-weight: bold">{name}</span><br/><br/>',
'da 500 ',
'</div>',
'</div>',
'<div style="clear:both; border: 0px;"></div>',
'</tpl>'
],
itemSelector: 'div.contact',
title: 'Offerte',
baseCls: 'contact',
singleSelect: true,
store: new Ext.data.Store({
model: 'Offer',
/* getGroupString: function(record){
return record.get('firstName')[0];
},*/
data: [{
name: 'Lanzarote',
img: 'data/thumbs/41.jpg',
alt: 'Lanzarote image'
}, {
name: 'Lanzarote',
img: 'data/thumbs/41.jpg',
alt: 'Lanzarote image'
}, {
name: 'Lanzarote',
img: 'data/thumbs/41.jpg',
alt: 'Lanzarote image'
}, {
name: 'Lanzarote',
img: 'data/thumbs/41.jpg',
alt: 'Lanzarote image'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
offerte.setCard(1);

},
beforeactivate: function () {
Ext.getCmp('topToolbar').setTitle(this.title);
}
}
});


var back = new Ext.Button({

xtype: 'button',
ui: 'mask',
// text:'back',
iconCls: 'reply',
dock: 'left',
stretch: 'true',

handler: function(){
offerte.setCard(0);
//var tabBar = panel.getTabBar();
//tabBar.removeDocked(back,false);
back.hide();
}
});

var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },

width: 320,
//width: 200,
height: 180,
items: [{
html: '<img src="data/photo/31.jpg" class="imgPortrait" />'
// html: '<img src="data/photo/31.jpg" class="imgLandscape" />'
}, {
title: 'Tab 2',
html: '<img src="data/photo/32.jpg" class="imgPortrait" />'
}, {
title: 'Tab 3',
html: '<img src="data/photo/34.jpg" class="imgPortrait" />'
}]
});

var carousel2 = new Ext.Carousel({
defaults: { cls: 'card' },

//width: 320,
width: 200,
height: 180,
items: [{
html: '<img src="data/photo/31.jpg" class="imgPortrait" />'
// html: '<img src="data/photo/31.jpg" class="imgLandscape" />'
}, {
title: 'Tab 2',
html: '<img src="data/photo/32.jpg" class="imgPortrait" />'
}, {
title: 'Tab 3',
html: '<img src="data/photo/34.jpg" class="imgPortrait" />'
}]
});

var detail = new Ext.Panel({

layout: {
// type: 'hbox',
type: 'vbox',
align: 'vertical'

},
monitorOrientation: 'true',
scroll: 'vertical',
//items: [carousel1,{
items: [carousel1,{
html: '<div class="descriptionPortait"><span style="font-weight: bold">Description:</span><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum ipsum eu sapien. Mauris pretium, elit sed scelerisque blandit, mauris diam fermentum nisl, quis vulputate odio quam id lacus. Vestibulum tellus. Suspendisse dictum elementum nisi. Quisque placerat varius nisl. Maecenas laoreet nibh sed nisi. In quis eros. Donec erat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum ipsum eu sapien. Mauris pretium, elit sed scelerisque blandit, mauris diam fermentum nisl, quis vulputate odio quam id lacus. Vestibulum tellus. Suspendisse dictum elementum nisi. Quisque placerat varius nisl. Maecenas laoreet nibh sed nisi. In quis eros. Donec erat.</div>',


}],

listeners: {
beforeactivate: function () {
var tabBar = panel.getTabBar();
tabBar.addDocked(back);
back.show();
tabBar.doLayout();


Ext.getCmp('topToolbar').setTitle("Offer 1");
// Ext.getCmp('topToolbar').setHeight("50");
},
orientationchange: function(p, type){
// alert(type);
//carousel1.removeAll();
//detail.getLayout().setAttribute("type","hbox");
offerte.setCard(2);
detail2.doLayout();
}
}


});

var detail2 = new Ext.Panel({

layout: {
type: 'hbox',
//type: 'vbox',
align: 'vertical'

},
monitorOrientation: 'true',
scroll: 'vertical',
//items: [carousel1,{
items: [carousel2,{

html: '<div class="descriptionLandscape"><span style="font-weight: bold">Description:</span><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum ipsum eu sapien. Mauris pretium, elit sed scelerisque blandit, mauris diam fermentum nisl, quis vulputate odio quam id lacus. Vestibulum tellus. Suspendisse dictum elementum nisi. Quisque placerat varius nisl. Maecenas laoreet nibh sed nisi. In quis eros. Donec erat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum ipsum eu sapien. Mauris pretium, elit sed scelerisque blandit, mauris diam fermentum nisl, quis vulputate odio quam id lacus. Vestibulum tellus. Suspendisse dictum elementum nisi. Quisque placerat varius nisl. Maecenas laoreet nibh sed nisi. In quis eros. Donec erat.</div>',

}],

listeners: {
beforeactivate: function () {
var tabBar = panel.getTabBar();
tabBar.addDocked(back);
back.show();
tabBar.doLayout();


Ext.getCmp('topToolbar').setTitle("Offer 1");
// Ext.getCmp('topToolbar').setHeight("50");
},
orientationchange: function(p, type){
//alert(type);
//carousel1.removeAll();
//detail.getLayout().setAttribute("type","hbox");
alert(detail.getLayout().getAttribute("type"));
detail.update();
}
}

});


var offerte = new Ext.Container({
layout: 'card',
title: 'Offerte',
iconCls: 'more',
items:
[list, detail,detail2]
});

var panel = new Ext.TabPanel({
fullscreen: true,

ui: 'dark',
animation: { type: 'cube', direction: 'down' },
tabBar: { dock: 'bottom', layout: { pack: 'center'} },
dockedItems: [{ id: 'topToolbar', dock: 'top', xtype: 'toolbar', title: 'My title'}],
items: [offerte,
{ title: 'Search', iconCls: 'search'
}],
defaults: {
listeners: {
beforeactivate: function () {
Ext.getCmp('topToolbar').setTitle(this.title);
}
}
}
});
}
});

ok sorry

msoriano
6 Sep 2010, 1:06 AM
did you end up getting it?

dbottillo
6 Sep 2010, 1:17 AM
yes

as told evan, you need two panel inside a card container and then switch from one to the other:



var bigOne = new Ext.Container({
layout: 'card',
title: 'bigOne',
iconCls: 'more',
items:[detail,detail2]
});


and then

var detail = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
scroll: 'vertical',
monitorOrientation: 'true',
items: [...],
listeners: {
orientationchange: function(p, type){
bigOne.setCard(1);
}
}
});

and detail2 have the same orientationchange listeners that call bigOne.setCard(0)

msoriano
7 Sep 2010, 6:59 PM
hey dbottillo, do you mind pasting full code with images so we can refer to it? thanks man.

msoriano
10 Sep 2010, 1:18 AM
any body?! sorry im new to this.