PDA

View Full Version : Getting Active Tab From Tab Panel Within a View



arandlett
21 Dec 2011, 9:52 AM
I am wanting to reuse some views since some panels will have same view just different data. My thought was to apply extra info to the tab panel items to specify the differences in the view.

For instance in my declaration of the tab panel tab items I have added extra variable "listtype".


Ext.define('MonkTouch.view.Viewport',{
extend: 'Ext.TabPanel',
config: {
fullscreen:true,
activeItem:0,
tabBarPosition:'bottom',
tabBar:{
layout:{
pack:'center',
align:'center'
},
scrollable:{
direction:'horizontal',
indecators:false
}
},
items:[
{
title : 'Media',
iconCls : 'action',
xtype : 'listwrap',
listtype: 'mtouch-list'
},
{
title : 'Articles',
iconCls : 'organize',
xtype : 'articlelist',
listtype: 'atouch-list'
}
]
}
});


So when the type is loaded I would like to find the active tab and use that variable or use the title.

How would I call the active tab and thus that or any extra variable I might add with data I want to use?

Or is there a better way to accomplish this?

estesbubba
21 Dec 2011, 10:52 AM
I'm not quite following what you want to do. Do you get some data in and know you want to populate the mtouch-list tab? If so, change listtype to itemId and do a

card = this.down('#mtouch-list');
card.setData(data);

If you want to make that tab active I think it's

this.setActiveItem('mtouch-list');

Let me know if I'm not following you correctly.

arandlett
21 Dec 2011, 11:12 AM
Within the view/xtype "listwrap" I load another view which is a list called "mtouch-list". My goal is to make the "listwrap" more dynamic. So using the extra data assigned to the tabs I can dynamically set which list is called within the "listwrap" by referencing the active tab which then would allow me to get the title of the list to assign as the xtype.

Here is my listwrap view hardcoded. I have commented what I thought might be a way to do that. The active tab call is probably not correct but hopefully you get the idea. Trying to reuse the listwrap view and dynamically set the xtype based on active tab.


Ext.define('MonkTouch.view.ListWrap',{
extend : 'Ext.Container',
xtype : 'listwrap',
config: {
layout:{
type:'card'
},
items:[
{
xtype : 'mtouch-list',
//xtype: MonkTouch.viewport.activetab.listtype
title : 'Media List'
},
{
xtype : 'titlebar',
title : 'Media',
defaultTitle: 'Media',
docked : 'top',
items : [
{
text : 'Back',
ui : 'back',
hidden : true
}
]
}]
},
setAnimation:function(animation){
this.getLayout().setAnimation(animation);
}
});


I may not be looking at this the correct way. Trying to reuse views.

estesbubba
21 Dec 2011, 11:58 AM
I just started using the config: {} way myself and haven't been able to figure out how to get it to use passed in data. I think everything in config needs to be static. Try this which will get the listtype value passed from the viewport.



Ext.define('MonkTouch.view.ListWrap',{
extend : 'Ext.Container',
xtype : 'listwrap',
config: {
layout:{
type:'card'
}
},

initialize: function() {


this.setItems(this.buildItems());
this.callParent();
},


buildItems: function() {
return([
{
xtype : this.listtype,
//xtype: MonkTouch.viewport.activetab.listtype
title : 'Media List'
},
{
xtype : 'titlebar',
title : 'Media',
defaultTitle: 'Media',
docked : 'top',
items : [
{
text : 'Back',
ui : 'back',
hidden : true
}
]
}]
},


setAnimation:function(animation){
this.getLayout().setAnimation(animation);
}
});

arandlett
21 Dec 2011, 2:29 PM
Thank you that seemed to work.