PDA

View Full Version : show a list component by pressing tabbar icon?



wakatanka
10 Jul 2010, 4:12 AM
Hi friends, i've an app with a tabbar of 5 icons,
i will show a pane with a list by pressing one of this icons but i can't figure it out,
someone can help me?

thanks.


this.navigationBarBottom = new Ext.TabPanel({
//fullscreen: true,
type: 'dark',
dock: 'bottom',
id: 'tabbo',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
activeItem: -1,
cls: 'card1',
items: [
{
iconCls: 'settings',
title: 'Disponibili',
listeners: {
activate: disponibili
}
},
{
iconCls: 'more',
title: 'Ordini'
},
{
iconCls: 'download',
title: 'Carrello'
},
{
iconCls: 'info',
title: 'Info'
},
{
iconCls: 'team',
title: 'Anagrafica'
}
]
});

danvega
12 Jul 2010, 5:12 AM
This is going to be a pretty standard layout for most so I am really surprised there are not more examples of this. I was working on the same type of layout and someone suggested to me to load the content after it was rendered. I was goingri to use ajax to load the content when the item was rendered but after running a quick test it seems all the cards are rendered right away. I really wish card layouts had a src attribute that pointed to a template (mypage.html) that would be loaded when the card is shown. Anyways do anyone have a suggestion on how to do this?


{
title:'Home',
iconCls:'bookmarks',
contentEl:'home',
listeners: {
afterrender: function(){
console.log("home rendered");
}
}
},
{
title:'Sessions',
iconCls:'time',
listeners: {
afterrender: function(){
console.log("sessions rendered");
}
}
},

evant
12 Jul 2010, 6:10 AM
If I understand what the OP is trying to do, there's already an example of this. Have a look at the tabs2 example in the download.

danvega
12 Jul 2010, 6:16 AM
The tabs2 demo code is below. It shows how to create that "type" of a layout. The only difference is that in this demo the content is all static and defined using the html attribute. What do you do if the content is a different file though? I am not sure you would want to load all 5 cards at one time would you? What if each card had to grab external data? That would be a pretty heavy initial load.


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
}, {
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}, {
title: 'Downloads',
id: 'tab3',
html: '<h1>Downloads Card</h1>',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'
}, {
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user'
}]
});
}
});

evant
12 Jul 2010, 7:03 AM
Instead of using the html option, use items, eg:



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
html: 'Top',
flex: 1
},{
html: 'Bottom',
flex: 1
}],
iconCls: 'info',
cls: 'card1'
}, {
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}, {
title: 'Downloads',
id: 'tab3',
html: '<h1>Downloads Card</h1>',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'
}, {
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user'
}]
});
}
});




What do you do if the content is a different file though? I am not sure you would want to load all 5 cards at one time would you? What if each card had to grab external data? That would be a pretty heavy initial load.


Maybe, maybe not, depends on your use case. If you don't want to load everything up front, you can wait til the card is activated, then load the content, eg:



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
}, {
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}, {
title: 'Downloads',
id: 'tab3',
html: '<h1>Downloads Card</h1>',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'
}, {
title: 'User',
cls: 'card5',
iconCls: 'user',
listeners: {
single: true,
activate: function(c){
c.add({
xtype: 'button',
text: 'I get added dynamically'
});
c.doLayout();
}
}
}]
});
}
});