PDA

View Full Version : Ext.Panel question



caseybecking
19 Jul 2010, 1:44 PM
I have quite a bit of code. What i'm doing is setting up an iPad based app to display some videos, pictures and other content in a Carousel. I want the video in the last slide to still allow me to click on the slider piece and i'm having issues with the panel. I cant get the panel to not display in full screen. Pklease see attached code


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

// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
ui: 'light',
fullscreen:false,
items: [{
contentEl: 'lipsm_2',
cls: 'card1',
iconCls: 'add' ,
scroll: 'vertical'
},{
contentEl: 'slideshow_home',
cls: 'htmlcontent',
},{
xtype: 'video',
url: 'videoplayback.mp4',
loop: true,
width: 500,
height: 400,
poster: 'Screenshot.jpg'

}]
});
//overlay
var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: Ext.platform.isPhone ? 260 : 400,
height: Ext.platform.isPhone ? 220 : 400,
styleHtmlContent: true,
scroll: 'vertical',
contentEl: 'lipsum',
cls: 'htmlcontent'
});
// link the stuff from the homepage to here
Ext.select('a.nextCard').on('click', function(e)
{
carousel1.next();
}
);
Ext.select('a.lastCard').on('click', function(e)
{
carousel1.setCard(2);
}
);
Ext.select('a.popUp').on('click', function(btn, event)
{
overlay.show();
}
);

//make the panel
new Ext.Panel({
defaults: {
flex: 1
},
items: [carousel1],
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
}
});

}
});

The fullscreen under items: [carousel1], if i change it to false it breaks the page. Any help would be awesome.

evant
19 Jul 2010, 9:54 PM
If you don't want the panel to be full screen, you need to
a) Give it dimensions
b) Explicitly call show() on it.

For example:



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

// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
ui: 'light',
fullscreen: false,
items: [{
html: 'Foo',
cls: 'card1',
iconCls: 'add',
scroll: 'vertical'
}, {
html: 'bar',
cls: 'htmlcontent',
}, {
xtype: 'video',
url: 'videoplayback.mp4',
loop: true,
poster: 'Screenshot.jpg'

}]
});

//make the panel
new Ext.Panel({
layout: 'fit',
width: 400,
height: 400,
items: carousel1
}).show();

}
});