Ext Js - Глобальный доступ к объектам

Question

У меня слишком много трудностей с доступом к объектам extjs. На этот раз у меня есть окно просмотра с двумя элементами, панелью инструментов на севере и панелью вкладок в центральной области. Я не знаю, как мне получить доступ к объекту tabpanel, чтобы использовать его методы или все, что я хочу. Это мой код:

Ext.onReady(function()
{
    var tabs = Ext.getCmp('dynamic-tabs');
    var viewport = new Ext.Viewport(
    {
        layout: 'border',
        renderTo: document.body,
        items: [
        {
            region: 'north',
            height: 25,
            xtype: 'toolbar',
            items: [

            {
                xtype: 'button', text: 'Início', iconCls: 'home',
                handler:function() {
                    tabs.add({
                        title: 'Início',
                        html: 'Tab Body',
                        closable:true
                    }).show();
                }
            },
            {
                xtype: 'button', text: 'Sistema', iconCls: 'sistema',
                menu: {
                    items: [

                        {
                            text: 'Usuários',
                            iconCls: 'usuario',
                            handler: function(){
                                tabs.add({
                                    title: 'Usuários',
                                    html: 'Tab Body',
                                    closable:true,
                                    autoLoad: 'form.php'
                                }).show();
                            }
                        },
                        {
                            text: 'Configurações',
                            iconCls: 'sistema',
                            handler: function(){
                                tabs.add({
                                    title: 'Configurações',
                                    html: 'Tab Body',
                                    closable:true,
                                    autoLoad: 'form.php'
                                }).show();
                            }
                        },'-',
                        {
                            text: 'Sair',
                            iconCls: 'logoff',
                            handler: function(){
                                tabs.add({
                                    title: 'Sair',
                                    html: 'Tab Body',
                                    closable:true,
                                    autoLoad: 'form.php'
                                }).show();
                            }
                        }
                    ]
                }
            } 
            ]
        }
        ,
        {
            region: 'center',
            xtype: 'tabpanel',
            id: 'dynamic-tabs',
            items: [
                {title: 'Início', autoLoad: 'iframe.php?url=form.php', active:true}
            ]
        }]
    });
    tabs.setActiveTab(0); // Throws: tabs is undefined
});

Например, я хочу использовать setActiveTab() в любом месте моего кода. Это просто, но я действительно не знаю = S

Редактировать: я изменил код, установив переменную tabs один раз в верхней части. Даже если я добавлю tabs.setActiveTab(0); на любой обработчик любой кнопки, он выдаст ту же ошибку. Обратите внимание, что версия Ext - 3.4 !!

Answer 1

Я понял. Я должен вызывать var tabs = Ext.getCmp('dynamic-tabs'); всегда перед вызовом любого метода. Я не могу установить его на глобальную переменную. Это была моя ошибка.

Answer 2

Вы можете получить глобальную ссылку на него.Проблема в том, что вы выполняете поиск до появления «динамических вкладок».

Ext.onReady(function(){
**var tabs;**
var viewport = new Ext.Viewport(
{
    layout: 'border',
    renderTo: document.body,
    items: [
    {
        region: 'north',
        height: 25,
        xtype: 'toolbar',
        items: [

        {
            xtype: 'button', text: 'Início', iconCls: 'home',
            handler:function() {
                tabs.add({
                    title: 'Início',
                    html: 'Tab Body',
                    closable:true
                }).show();
            }
        },
        {
            xtype: 'button', text: 'Sistema', iconCls: 'sistema',
            menu: {
                items: [

                    {
                        text: 'Usuários',
                        iconCls: 'usuario',
                        handler: function(){
                            tabs.add({
                                title: 'Usuários',
                                html: 'Tab Body',
                                closable:true,
                                autoLoad: 'form.php'
                            }).show();
                        }
                    },
                    {
                        text: 'Configurações',
                        iconCls: 'sistema',
                        handler: function(){
                            tabs.add({
                                title: 'Configurações',
                                html: 'Tab Body',
                                closable:true,
                                autoLoad: 'form.php'
                            }).show();
                        }
                    },'-',
                    {
                        text: 'Sair',
                        iconCls: 'logoff',
                        handler: function(){
                            tabs.add({
                                title: 'Sair',
                                html: 'Tab Body',
                                closable:true,
                                autoLoad: 'form.php'
                            }).show();
                        }
                    }
                ]
            }
        } 
        ]
    },{
        region: 'center',
        xtype: 'tabpanel',
        id: 'dynamic-tabs',
        items: [
            {title: 'Início', autoLoad: 'iframe.php?url=form.php', active:true}
        ],
        **listeners : {
            'render' : function(){
                tabs = this;
            }
        }**
    }],

});
tabs.setActiveTab(0); // Throws: tabs is undefined

});

Добавьте прослушиватель, который ожидает отрисовки «динамических вкладок»,и затем установите его глобально.