PDA

View Full Version : Inserting panels into a container



daveamos
2 Jul 2010, 8:48 AM
Sorry about the newbie question, but I'm still wrapping my head around doing layouts in Extjs -- I'm used to plain HTML + CSS!

I want to create a screen with a toolbar (which works) and below that the screen split into two parts. On the left, a carousel of images. On the right, some text. The carousel works by itself as a panel, but when I try and use a Ext.Container to hold both panels, nothing appears. Here's the code:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var carousel2 = new Ext.Carousel({
direction: 'vertical',
ui: 'light',
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
},
{
title: 'Tab 2',
html: '<img src="images/image2.jpg" />'
},
{
title: 'Tab 3',
html: '<img src="images/image3.jpg" />'
}]
});

var tb = new Ext.Toolbar({
renderTo: document.body,
fullscreen: true,
height:50,
items: [
{
text: 'Back'
}
]
});

var fixedimage = new Ext.Panel({
title: 'Fixed Image',
html: '<p>Hi there</p>'
});

var comparescreen = new Ext.Container({
height: 718,
width: 1024,
layout: 'absolute',
autoScroll: true,
defaults: {
frame: true,
height: 718,
width: 512
},
items : [
{
name: 'carousel',
x : 0,
y : 0
},
{
name: 'fixedimage',
x : 512,
y : 0
}
]
});
}
});

Any help would be appreciated. Thanks!

TommyMaintz
2 Jul 2010, 11:59 AM
I refactored your code a little bit to get closer to what you are trying to achieve. I would suggest diving into the source code of our examples, especially geocongress, kitchensink and kiva, to get more familiar with layouts, panels, containers etc.

Anyway, here is the code.



var toolbar = new Ext.Toolbar({
dock: 'top',
items: [{
text: 'Back'
}]
});

var fixedimage = new Ext.Panel({
title: 'Fixed Image',
html: '<p>Hi there</p>'
});

var comparescreen = new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
layout: 'hbox',
items: [{
flex: 1,
direction: 'vertical',
ui: 'light',
items: [{
title: 'Tab 1',
html: '<img src="images/image1.jpg" /><p>A sample caption</p>'
}, {
title: 'Tab 2',
html: '<img src="images/image2.jpg" />'
}, {
title: 'Tab 3',
html: '<img src="images/image3.jpg" />'
}]
}, {
flex: 1,
html: 'content on the right'
}]
});

daveamos
2 Jul 2010, 1:36 PM
Thanks! It does get me closer to what I was looking for. The carousel doesn't work, but I think I can add that back in. I'll look more closely at the demos in the future.

Thanks again!