我想要做的是将多个面板添加到选项卡面板。选项卡面板和面板位于不同的文件(File1、File2、File3)中,并且代码位于匿名函数内。完成这项工作最简单和/或最好的方法是什么?
main.html
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
文件1.js
Ext.application({
name: 'app',
launch: function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
id: 'tabPanel',
...
});
}
});
文件2.js
function() {
var panel1 = Ext.create('Ext.panel.Panel', {
....
});
tabPanel.add(panel1); // Of course not working since tabPanel of File1.js is private
}
文件3.js
function() {
var panel2 = Ext.create('Ext.panel.Panel', {
....
});
tabPanel.add(panel2); // Of course not working since tabPanel of File1.js is private
}
最佳答案
如果您只是尝试在不同的物理文件中分离 UI 元素定义,则可以而且应该使用 View 。
在 View /TabPanel.js 中:
Ext.define('YourApplicationName.TabPanel.view', {
extend: 'Ext.tab.Panel',
alias: 'widget.TabPanel',
itemId: 'TabPanel' //never use 'id', let ExtJS use it.
...
});
在 view/Panel1.js 中:
Ext.define('YourApplicationName.Panel1.view', {
extend: 'Ext.tab.Panel',
alias: 'widget.Panel1',
itemId: 'Panel1'
...
});
一旦创建了 View (当然还有它们各自的 Controller ,即:YourApplicationName.TabPanel.controller
),您就可以从任何 Controller 使用Ext.ComponentQuery 访问组件。查询
例如
var component = Ext.ComponentQuery.query('panel[itemId=TabPanel]')[0]; //assuming only one item has such itemId.
在 Ext 4.x+ 中(我认为),main.html
(实际上是 index.html
)应该由 Sencha Cmd(sencha 应用程序生成)生成
sencha generate app MyApp /path/to/MyApp
另一方面,如果您只是想在整个 ExtJS 应用程序中访问对象,请参阅我的问题及其答案
How to share objects/methods between controllers without circular references?
关于javascript - ExtJS - 从不同文件访问变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25218849/