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

您可以获得它的全局引用。问题是你正在进行查找在'dynamic-tabs'存在之前。

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

}）;

添加一个等待“动态标签”呈现的侦听器，然后将其全局设置。

Ext Js - 对象的全局访问

2 个答案: