javascript - EXTJS范围问题

Question

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

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

这是我的问题:

1.如果 mainTabPnl 在 vi​​ew_main.js 中定义，处理程序在 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 相同。