Sencha Touch Ext.TabPanel handler - extjs

Question

I did a lot of reading but i can't figure this out.
This app uses Sencha Touch 2.0
My 'app' has a segmented button
xtype: 'segmentedbutton'
With this item
{
text: 'Blog',
scope: this,
handler: this.makeYqlRequest
}
This is what it does
blog: {
query: "select * from rss where url='http://feeds.feedburner.com/extblog' limit 5",
tpl: Ext.create('Ext.XTemplate', [
'<tpl if="item">',
'<tpl for="item">',
'<div class="blog-post">',
'<h3>{title}</h3>',
'<p>{description}</p>',
'</div>',
'</tpl>',
'</tpl>'
])
}
This works wel but now i want to use the Ext.TabPanel
And i have this item
{
title: 'Blog',
iconCls: 'home',
html: 'Blog Screen'
}
How can i get the handler from the segmented button to work with the Ext.TabPanel?
I played a little with a listener but i can't get it to work.
Can someone explain this a little more to me?
Thank you!

Answer 1

You will need to get a reference to your TabPanel and call the [setActiveItem](http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-setActiveItem), passing the view you want to make active, or the index of that view.
Simple example (viewable here):
Ext.setup({
onReady: function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
fullscreen: true,
items: [
{
title: 'Home',
items: [
{
xtype: 'toolbar',
items: [
{
xtype: 'segmentedbutton',
items: [
{
text: 'home'
},
{
text: 'blog',
handler: function() {
// Using an index
tabPanel.setActiveItem(1);
}
},
{
text: 'about',
handler: function() {
// Using a reference
var about = tabPanel.down('#about');
tabPanel.setActiveItem(about);
}
}
]
}
]
},
{
html: 'tap one of the above buttons to change the active tab.'
}
]
},
{
title: 'Blog',
html: 'blog'
},
{
title: 'About',
itemId: 'about',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
text: 'Go to home',
handler: function() {
// using the index
tabPanel.setActiveItem(0);
}
}
]
}
]
}
]
});
}
});