Блог

Главная - Вопросы по программированию - Ext Js — глобальный доступ к объектам

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

#javascript #extjs

#javascript #extjs

Вопрос:

У меня слишком много трудностей с доступом к объектам 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 !!

Комментарии:

1. Но вы уже получаете доступ к панели вкладок в 2 ваших обработчиках: var tabs = Ext.getCmp('dynamic-tabs'); tabs.callAnyMethod();

2. нет. Я изменил имя первой переменной вкладки tabs1 на, а затем вызвал tabs1.setActiveTab(0) , но он выдает tabs1 is not defined

3. Я действительно не понимаю — какое отношение имеет изменение имени к чему-либо? Вы хотите сказать, что код в обработчиках не работает? Потому что это доступ к панели вкладок. Попробуйте добавить эту строку: tabs.setActiveTab(0); в конце любого обработчика, и это должно сработать.

4. Но я хочу получить к нему доступ внутри или снаружи обработчика, например, для внешнего файла. Я пробовал это: Ext.onReady(function() { var tabs = Ext.getCmp('dynamic-tabs'); var viewport = new Ext.Viewport( { // Supressed code }); tabs.setActiveTab(0); }); но показывает мне ту же ошибку.

5. Если под внешним файлом вы подразумеваете что-то, загруженное в iframe, это невозможно. В противном случае, пожалуйста, перефразируйте свой вопрос или, что еще лучше, просто создайте пример в jsfiddle.

Ответ №1:

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

Ответ №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

});

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