PDA

View Full Version : Newbie Question for Ext.Panel and Ext.TabPanel



codeworxx
9 Feb 2011, 12:40 AM
Hey good morning Guys,

first of all my Name is Sascha and i'm a total Newbie of Sencha Touch. I have startet with yesterday, watched the Screen Casts and the tutorials - but i have two problems and no Solution. Hope you can help so that i understand how to use the Ext.Panel and TabPanel correctly:

I have a Ext.Panel with "dockedItems" - that's the Title - also i have a Ext.TabPanel with with 2 Items - one is Content, the second should be a Carousel in the topper Area (Area1) and content in the bottom Area (Area2). I have the Problem, that my Content is cut because of the Ext.Panel and the Carousel is Full Screen instead of topper Area.

I made two Screenshots to understand my Problem:

http://dc.codeworxx.com/forum/sencha/image1.png
http://dc.codeworxx.com/forum/sencha/image2.png


And here is my code:


Ext.setup({
phoneStartupScreen: 'assets/images/phoneStartUp.png',
icon: 'assets/images/icon.png',
glossyOnIcon: false,
onReady: function() {

var topPanel = new Ext.Panel({
items: [],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Title'
}]
});

var tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom'
},
fullscreen: 1,
cardSwitchAnimation: {
type: 'slide',
cover: true
},
items: [
{
title: 'Partys',
html: '<h1>Partys</h1>',
iconCls: 'info',
cls: 'parties',
badgeText: '4',
flex: 1
},
{
title: 'Favorites',
xtype: 'carousel',
iconCls: 'favorites',
cls: 'favorites',
badgeText: '27',
height: 200,
items: [{
html: '<h1>Screen1</h1>'
},{
html: '<h1>Screen2</h1>'
},{
html: '<h1>Screen3</h1>'
}]
}
]
});

var rootPanel = new Ext.Panel({
fullscreen: true,
layouts: 'auto',
items: [topPanel, tabPanel]
});
}
});

Anyone any ideas?

Thanks,
Sascha

tomalex0
9 Feb 2011, 2:52 AM
Its better to provide dockedItems for Tabpanel instead of separate panel

Try this


Ext.setup({
phoneStartupScreen: 'assets/images/phoneStartUp.png',
icon: 'assets/images/icon.png',
glossyOnIcon: false,
onReady: function() {



var tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Title'
}],

fullscreen: 1,
cardSwitchAnimation: {
type: 'slide',
cover: true
},
items: [
{
title: 'Partys',
html: '<h1>Partys</h1>',
iconCls: 'info',
cls: 'parties',
badgeText: '4',
flex: 1
},
{
title: 'Favorites',
xtype: 'carousel',
iconCls: 'favorites',
cls: 'favorites',
badgeText: '27',
height: 200,
items: [{
html: '<h1>Screen1</h1>'
},{
html: '<h1>Screen2</h1>'
},{
html: '<h1>Screen3</h1>'
}]
}
]
});

var rootPanel = new Ext.Panel({
fullscreen: true,
layouts: 'auto',
items: [tabPanel]
});
}
});

codeworxx
9 Feb 2011, 3:41 AM
Thank you very much @tomalex,

it works :)
But what about my second question? Do you also have a hint:

The second tab with the carousel should contain the carousel in the upper part (about 150px height) and a html content in the lower part??

Thanks

tomalex0
9 Feb 2011, 4:03 AM
For this you will have to add panel to the second Tab with vbox layout which has two items
1.Carousel
2. Html container

You can find more details on Layouts here

http://www.slideshare.net/davidkaneda/sencha-touch-workshop

Maybe something similar to this



{
title : Favorites,
items:[{
layout:'vbox',
items:[{
flex:2 //carousel here
},{
flex:1 //html here
}]
}]
}

codeworxx
9 Feb 2011, 4:17 AM
Amazing!!

Thank you very much! I think i now understand it :)

Thanks for the fast reply.

Sascha

codeworxx
9 Feb 2011, 5:42 AM
Okay, i have tried with the following code - but i only see the content not the carousel?!?


Ext.setup({
phoneStartupScreen: 'assets/images/phoneStartUp.png',
icon: 'assets/images/icon.png',
glossyOnIcon: false,
onReady: function() {

var tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Title'
}],

fullscreen: 1,
cardSwitchAnimation: {
type: 'slide',
cover: true
},
items: [
{
title: 'Partys',
html: '<h1>Partys</h1>',
iconCls: 'info',
cls: 'parties',
badgeText: '4',
flex: 1
},
{
title: 'Favorites',
iconCls: 'favorites',
cls: 'favorites',
badgeText: '27',
items: [{
layout: 'vbox',
align: 'stretch',
pack: 'end',
items: [{
flex: 2,
xtype: 'carousel',
height: 100,
items: [{
html: '<h1>Test1</h1>'
},{
html: '<h1>Test2</h1>'
},{
html: '<h1>Test3</h1>'
}]
},{
flex: 1,
html: '<h1>Tester</h1>'
}]
}]
}
]
});

var rootPanel = new Ext.Panel({
fullscreen: true,
layouts: 'auto',
items: [tabPanel]
});
}
});

tomalex0
9 Feb 2011, 8:27 PM
You have not assigned


align: 'stretch', in proper way

it should be like


layout : {
type:'vbox',
align: 'stretch'

}

the problem is, as the align stretch is not applied, the width of carousel is 0 and the items are not displayed.
But it is already rendered in DOM, it will be also better if you use webdeveloper tool so you can find out the mistakes easily.

tomalex0
9 Feb 2011, 8:35 PM
Try using like this , here we have assigned carousel and html panel as immediate child of Tab, so that we can avoid an extra panel as you have done.




{
title: 'Favorites',
iconCls: 'favorites',
cls: 'favorites',
badgeText: '27',
layout: {
type:'vbox'
align: 'stretch',
},
items: [{
flex: 2,
xtype: 'carousel',
height: 100,
items: [{
html: '<h1>Test1</h1>'
},{
html: '<h1>Test2</h1>'
},{
html: '<h1>Test3</h1>'
}]
},{
flex: 1,
html: '<h1>Tester</h1>'
}]
}