EXTJS范围问题

Question

这是一个新手问题。希望这个例子可以教育我自己和其他人以及解决我的问题。

我有一个与 EXTJS 复杂布局示例非常相似的 EXTJS 布局。 TabPanel 是此布局的中心部分。其中一个选项卡呈现一个显示一些数据的 GridPanel。我想点击表格中的编辑图标并打开一个单独的选项卡进行编辑。

这是我的问题：

1。如果在 view_main.js 中定义了 mainTabPnl，在 grid.js 中定义了处理程序，我如何向 mainTabPnl 添加选项卡？这似乎是一个范围问题。

2。在下面的 Firefox 行中，'t' 是未定义的。为什么？

var t = Ext.getCmp('main-tab-panel');

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

将所有 UI 初始化代码收集到从单个文件对 Ext.onReady 进行的单个调用中。这将确保在您开始构建小部件之前完全初始化 ExtJS 库，并且以正确的顺序实例化交互的小部件。

具体答案：

1：通过标准包含拉入同一页面的多个 JS 文件之间不存在“范围问题”。每个文件中定义的全局符号填充相同的窗口对象。

2: 'main-tab-panel' 在调用时还不存在。将所有 UI 初始化放入同一个 Ext.onReady 调用将防止这种情况发生。

3：您正在创建一个 DOM 节点，其 ID 与您已经用于 contentEl 的 ID 相同。