Sencha Touch Ext.TabPanel обработчик

Question

Я много читал, но не могу понять это. Это приложение использует Sencha Touch 2.0

У моего «приложения» есть сегментированная кнопка

xtype: 'segmentedbutton'

С этим товаром

{
text: 'Blog',
scope: this,
handler: this.makeYqlRequest
}

Это то, что он делает

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><a href="{link}" target="_blank">{title}</a></h3>',
                    '<p>{description}</p>',
                '</div>',
            '</tpl>',
        '</tpl>'
    ])
}

Это хорошо работает, но теперь я хочу использовать Ext.TabPanel

И у меня есть этот предмет

{
title: 'Blog',
iconCls: 'home',
html: 'Blog Screen'
}

Как мне получить обработчик от сегментированной кнопки для работы с Ext.TabPanel? Я немного поиграл со слушателем, но не могу заставить его работать.

Может кто-нибудь объяснить мне немного больше?

Спасибо!

Answer 1

Вам нужно будет получить ссылку на вашу TabPanel и вызвать [setActiveItem](http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-setActiveItem), передавая представление, которое вы хотите сделать активным, или индекс этого представления.

Простой пример (для просмотра здесь):

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);
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        });
    }
});