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：在该通话时，“主要标签面板”尚不存在。将所有UI初始化放入相同的Ext.onReady调用将阻止这种情况发生。

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

EXTJS范围问题

1 个答案: