Showing a Tab without explicity clicking on tab icon - extjs

Question

I am currently working on an application im using Sencha Touch 1.
I have 2 items in my TabPanel. Search and Alarm.
The Search tab on clicking gives a list of 4 .
When the user clicks on the 4th item in the list he should automatically be directed to Alarm Tab without manually clicking on the tab.
Is there any function that I could use to do so .
Im a beginner at Sencha touch.Suggestions are welcome .
This is my app.js
ToolbarDemo=new Ext.Application({
name:'ToolbarDemo',
launch:function(){
ToolbarDemo.views.Viewport=new Ext.TabPanel({
fullscreen:true,
defaults:
{
html:'',
styleHtmlContent:true,
} ,
tabBar:
{
dock:'bottom',
layout:{
pack:'center'
}
},
items:[
/*
{
xtype:'homecard'
},
*/
{
xtype:'searchcard'
},
/*
{
xtype:'actioncard'
},
*/ {
xtype:'settingscard'
},
{
xtype:'morecard'
},
] ,
});
}
});
And searchcard has following code (searchcard.js)
Ext.regModel('Contact',{
fields:['firstName','lastName']
});
//create a store
var liststore = new Ext.data.Store({
model:'Contact',
getGroupString:function(record){
return record.get('firstName')[0];
},
data:[
{firstName:'Network Summary'},
{firstName: 'Alarms and Alerts'},
]
});
detailpanel=new Ext.Panel({
layout:'fit',
id:'detailpanel',
html:'HELLO ',
});
listpanel =new Ext.List({
id:'indexlist',
store:liststore, //take data from store created above
itemTpl:'{firstName}',
indexBar:true , //property of list
onItemDisclosure:function(record)
{
mainpanel.setActiveItem('detailpanel');
}
});
mainpanel=new Ext.Panel({
id:'mainpanel',
layout:'card',
items:[
listpanel,detailpanel
],
});
ToolbarDemo.views.Searchcard= Ext.extend(Ext.Panel,{
title:'Search',
iconCls:'search',
badgeText:'1',
layout:'fit',
//items:[listpanel],
initComponent: function() {
Ext.apply(this, {
items:[mainpanel],
});
ToolbarDemo.views.Searchcard.superclass.initComponent.apply(this, arguments);
}
}) ;
Ext.reg('searchcard',ToolbarDemo.views.Searchcard);
And my alarms tab has the following code (morecard.js)
Ext.regModel('Contact',{
fields:['firstName','lastName']
});
var liststore = new Ext.data.Store({
model:'Contact',
getGroupString:function(record){
return record.get('firstName')[0];
},
data:[
{firstName:'Critical Alarms'},
{firstName: 'Major alarms'},
{firstName: 'Minor alarms'},
{firstName: 'Alerts'},
]
});
detailpanel=new Ext.Panel({
id:'detailpanel',
tpl:'HELLO ',
});
listpanel_my =new Ext.List({
id:'indexlist',
store:liststore, //take data from store created above
itemTpl:'{firstName}',
indexBar:true , //property of list
onItemDisclosure:function(record)
{
// ToolbarDemo.views.Viewport.setActiveItem('detailpanel');
}
});
ToolbarDemo.views.Morecard = Ext.extend(Ext.Panel, {
title: "Alarms",
iconCls: "more",
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
items:[listpanel_my] ,
});
ToolbarDemo.views.Morecard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('morecard', ToolbarDemo.views.Morecard);
i spefically want when i click list item named Alarms and Alerts in Search Tab (searchard.js) after that I automatically want my Alarms tab to be active and show its items (Major Alarms, minor Alarms etc)

Answer 1

Your TabPanel has a method called setActiveItem(item) where item is a number.
Also refer to the Sencha Touch Docs regarding this method. Container is the superclass of TabPanel.