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

編輯：我更改了一次在頂部設置var 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

}）;

添加一個等待“動態選項卡”呈現的偵聽器，然后進行全局設置。