这是一个新手问题。希望这个例子可以教育我自己和其他人,并解决我的问题。
我有一个 EXTJS 布局,它与 EXTJS 复杂布局示例非常相似。 TabPanel 是此布局的中心部分。其中一个选项卡呈现一个显示一些数据的 GridPanel。我想单击表中的“编辑”图标并打开一个单独的选项卡来进行编辑。
这是我的问题:
block 引用> block 引用>var t = Ext.getCmp('main-tab-panel');
感谢您对此的任何帮助......
// 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();
}
}];
}];
最佳答案
将所有 UI 初始化代码收集到从单个文件发出的对 Ext.onReady 的单个调用中。这将确保 ExtJS 库在开始构建小部件之前完全初始化,并且交互小部件以正确的顺序实例化。
具体答案:
1:通过标准包含拉入同一页面的多个 JS 文件之间不存在“范围问题”。每个文件中定义的全局符号填充相同的窗口对象。
2:调用时“main-tab-panel”尚不存在。将所有 UI 初始化放入同一个 Ext.onReady 调用中将防止这种情况发生。
3:您正在创建一个 DOM 节点,其 ID 与您已用于 contentEl 的 ID 相同。
关于javascript - EXTJS范围问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4395193/