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!
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!