PDA

View Full Version : Tab panels, Lists and regular panels all being friends



Johnbran
24 Jun 2011, 9:40 AM
Hello,

I have a bottom tab panel. On one of those panels is a list. I want to display a separate panel when an item is clicked. I have tried to follow the O'reilly example provided by Sencha. But every time I click an item it creates a new blank tab when it displays the panel. I am sure it has to do with this code:

listeners: {
itemtap: function(list, index){
BottomBar.setActiveItem(testCard,'slide');
}}

In the O'reilly example it uses 'this' instead of 'BottomBar' but that is the only way I could get it to work. What is the proper way to accomplish what I am trying to do? Will some one please post a simple example. I am very new to this and have looked everywhere.

Thanks

bclinton
25 Jun 2011, 12:04 PM
More code please.

If I had to guess from that snippet, I'd say that testCard is your problem. But it's hard to be sure because I don't know what it is.

The description of the card parameter in setActiveItem is this:


The card you want to be made active. A number is interpreted as a card index. An object will be converted to a Component using the objects xtype property, then added to the container and made active. Passing a Component will make sure the component is a child of this container, and then make it active.

If testCard is not an existing Component, but is instead an object definition without a title attribute, then that would lead to the behavior you describe.

mr.xprt
25 Jun 2011, 12:24 PM
try this code , i think that's ur searching for


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

var panel1=new Ext.Panel({
layout:'card',
html:'Am Panel 1',
iconCls: 'bookmarks',
title:'favo'
}) ;

var panel2=new Ext.Panel({
layout:'card',
html:'Am Panel 2',
items:[{
xtype:'button',
text:'go to panel 3',
handler:function(e,b){
panel2and3.setActiveItem(1);
}
}]

}) ;
var panel3=new Ext.Panel({
layout:'card',
html:'Am Panel 2',
items:[{
xtype:'button',
text:'go to panel 2',
handler:function(e,b){
panel2and3.setActiveItem(0);
}
}]
}) ;


var panel2and3=new Ext.Panel({
layout:'card',
iconCls: 'info',
cardSwitchAnimation: 'slide',
items:[panel2,panel3]
});
new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
},
},
items: [ panel1,panel2and3 ]
});



}

});
now u can change the panels with other any View u want ;)