PDA

View Full Version : Type of layout to combine different element



dbottillo
20 Jul 2010, 1:26 AM
hi to everyone

i make a list of items
and now i want to render a nested layout for the single item

my code now is:


var singleItem = new Ext.Panel({
layout: {
type: 'auto',
align: 'stretch'
},
items: [{
flex: 1,
html: '<div style="background-color: white; margin: 5px auto; height: 800px; width: 90%">Layout single item<br />img: {img}</div>',
style: 'border: 1px solid red;'
}],
listeners: {
beforeactivate: function () {
var tabBar = panel.getTabBar();
tabBar.addDocked(back);
back.show();
tabBar.doLayout();
}
}
});

so i want to create this type of layout:
a div whit particular background
inside this div a title, after a carousel of 3-4 images then a description
how can i compose this element to create this layout?

thank you

Daniele

evant
20 Jul 2010, 1:30 AM
I'm not quite sure what you're asking for, perhaps draw a quick mockup.

dbottillo
20 Jul 2010, 1:53 AM
21525

this is a mockup of how the panel should be

evant
20 Jul 2010, 2:05 AM
Sounds like you just want a vbox with 3 items:



new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
height: 20
},{
flex: 1,
//carousel
},{
flex: 1,
//description
}]
});

dbottillo
20 Jul 2010, 2:55 AM
ok thank you for reply

i'm trying to set with vbox:

my code now is:

var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [{
html: '<h1>Carousel</h1><p>Change page here</p>'
}, {
title: 'Tab 2',
html: 'page 2'
}, {
title: 'Tab 3',
html: 'page 3'
}]
});
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
height: 20
},{
flex: 1,
html: 'title'
},carousel1,{
flex: 1,
html: 'description'
}]

and it works, display the carousel and after description
but title is under carousel (i can see it if i switch to the second page of the carousel)
21527
so title is not before carousel!

and how can i set a div that contains all of this element? i want this element inside a div whit background white (not set the background of this layout to white)

thank you

Daniele

dbottillo
22 Jul 2010, 1:49 AM
Hi,

i'm working to upgrade my layout
now it's ok but there is a little problem
if the panel is more tall than the height of the display, panel is cutted down and even if a set scroll:'vertical', the panel scroll down but it display anything! is just cutted

my code is:

var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [{
html: '<img src="data/photo/31.jpg" style="width: 300px; height: 170px" />'
}, {
title: 'Tab 2',
html: '<img src="data/photo/32.jpg" style="width: 300px; height: 170px" />'
}, {
title: 'Tab 3',
html: '<img src="data/photo/34.jpg" style="width: 300px; height: 170px" />'
}]
});
var detail = new Ext.Panel({
layout: {
type: 'vbox',
align: 'vertical'
},
scroll: 'vertical',
items: [carousel1,{
flex: 1,
html: '<div style="background-color: white; margin: 10px auto; width: 90%; font-size: 0.4em; color: black"><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>',

}]
});anyone?

this panel is inside a tabPanel (maybe is important to know)
thank you

Daniele

evant
22 Jul 2010, 2:06 AM
Flex means "take up the rest of the height", so that will never work. You need to give each item an explicit height.

dbottillo
22 Jul 2010, 2:24 AM
ok thank you now it work! (i'm searching for what flex does mean in documentation but i didn't find anything!)

another question
when i put my nexus on landscape mode layout now it's not good
in fact in landscape mode carousel and description should be next horizontal way not vertical!

i try to add a listener to the panel:

listeners: {
beforeactivate: function () {
var tabBar = panel.getTabBar();
tabBar.addDocked(back);
back.show();
tabBar.doLayout();
Ext.getCmp('topToolbar').setTitle("Offer 1");
},
orientationchange: function(p, type){
alert("I'm rotating!");
carousel1.removeAll();
}
}

beforeactivate event work
but orientationchange none...it not display any alert and carousel remain full

what i want to do is to rearrange panel when orientation change

where i'm wrong?

Daniele

evant
22 Jul 2010, 4:28 AM
http://www.sencha.com/deploy/touch/docs/?class=Ext.Panel&member=monitorOrientation

Defaults to false for panel.

Chromatik
22 Jul 2010, 11:24 AM
Hi, believe my question is very similar so didn't start a new thread, here goes:

I'd like to combine a bottom tabPanel that has 2 items, i'd like second item to contain a carousel with 3 items.

Is this possible?

evant
22 Jul 2010, 2:58 PM
"Combine" how? Second item of the first tab panel? More description please.

Chromatik
22 Jul 2010, 4:38 PM
So I have the bottom tab panel with 2 tabs, when you click on the 2nd tab it slides the card over which has a carousel. Basically, I want the carousel to be a child of the 2nd tab.

The tab panel is the parent,
The 2 tabs are children of the tab panel,
The carousel is a child of the 2nd tab.
The carousel would have 3 children.
I hope I'm explaining this clearly.

Thank you for you help.

evant
22 Jul 2010, 4:52 PM
It's trivial to do:



// Setup the Sencha Touch app.
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
new Ext.TabPanel({
fullscreen: true,
items: [{
title: 'Tab 1'
},{
title: 'Tab 2',
xtype: 'carousel',
items: [{
html: 'Item 1'
},{
html: 'Item 2'
},{
html: 'Item 3'
}]
}]
});
}
});

Chromatik
22 Jul 2010, 6:05 PM
Brilliantly simple! thanks again.