Проблема объема EXTJS

Question

Это вопрос новичка. Надеюсь, что этот пример может научить меня и других, а также исправить мою проблему.

У меня есть макет EXTJS, который очень похож на пример сложного макета EXTJS. TabPanel является центральной частью этого макета. Одна из вкладок отображает GridPanel, которая отображает некоторые данные. Я хочу нажать на значок «Редактировать» в таблице и открыть отдельную вкладку для редактирования.

Вот мои вопросы:

1. Если mainTabPnl определен в view_main.js, а обработчик - в grid.js, как мне добавить вкладку в mainTabPnl? Это похоже на проблему сфер.

2. В следующей строке Firefox 't' не определено. Почему?

var t = Ext.getCmp ('панель основной вкладки');

3. Если я пытаюсь идентифицировать свои вкладки, весь мой макет становится бесполезным. Что тут происходит? (см. вкладку «center2»). Я подумал, что если бы я мог сделать Ext.getCmp ('center2'), я мог бы сделать что-то внутри из отдельного обработчика.

Спасибо за любую помощь в этом ....

// file: view_main.js
var mainTabPnl =  new Ext.TabPanel({
        region: 'center', 
        id: 'main-tab-pnl',
        deferredRender: false,
        activeTab: 0,     
        items: [{
            contentEl: 'center2',
            //id: 'center2',  /*!!! screen goes haywire!! why? !!!*/
            title: 'Main Panel',
            autoScroll: true
        }, {
            contentEl: 'center1',
            title: 'Close Me',
            closable: true,
            autoScroll: true
        }]
    })

 // file: grid.js
 var columns = [{
   // Column Headers
   //...
    },{
        header: 'Actions',
        id: 'actions',
        xtype: 'actioncolumn',
        width: 50,
        items: [{
             icon   : '/site_media/icons/application_edit.png',  
             tooltip: 'Edit Record',
             handler: function(grid, rowIndex, colIndex) {
                 alert("Add-Tab "); // The alert works..

                 /* but mainTabPnl is not defined */ 
                 mainTabPnl.add({
                     title: 'New Tab',
                     iconCls: 'tabs',
                     html: 'Tab Body <br/><br/>',
                     closable:true
                 }).show();
             }
         }];
    }];

Answer 1

Соберите весь свой код инициализации пользовательского интерфейса в один вызов Ext.onReady из одного файла.Это обеспечит полную инициализацию библиотеки ExtJS, прежде чем вы начнете создавать свои виджеты, и что экземпляры взаимодействующих виджетов будут созданы в правильном порядке.

Конкретные ответы:

1: нет проблемы с ограничениемmsgstr "между несколькими файлами JS, перетянутыми в одну и ту же страницу через стандартные включения.Глобальные символы, определенные в каждом файле, заполняют один и тот же объект окна.

2: «главная панель вкладок» еще не существовала во время этого вызова.Помещение всей инициализации пользовательского интерфейса в один и тот же вызов Ext.onReady предотвратит это.

3: Вы создаете DOM-узел с идентификатором, идентичным тому, который вы уже используете для contentEl.