ExtJS -从不同的文件访问变量

Question

我想要做的是将几个面板添加到选项卡面板。选项卡面板和面板位于不同的文件(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>

File1.js

Ext.application({    
    name: 'app',    
    launch: function() {
        var tabPanel = Ext.create('Ext.tab.Panel', {
            id: 'tabPanel',
            ...
        });
    }
});

File2.js

function() {
    var panel1 = Ext.create('Ext.panel.Panel', {
        ....
    });
    tabPanel.add(panel1); // Of course not working since tabPanel of File1.js is private
}

File3.js

function() {
    var panel2 = Ext.create('Ext.panel.Panel', {
        ....
    });
    tabPanel.add(panel2); // Of course not working since tabPanel of File1.js is private
}

Answer 1

如果你只是想在不同的物理文件中分离UI元素定义，你可以而且应该使用视图。

在视图/TabPanel.js:

Ext.define('YourApplicationName.TabPanel.view', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.TabPanel',
    itemId: 'TabPanel' //never use 'id', let ExtJS use it.
    ...
});

在视图/Panel1.js:

Ext.define('YourApplicationName.Panel1.view', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.Panel1',
    itemId: 'Panel1'
    ...
});

当你的视图被创建(当然有它们各自的控制器，如:YourApplicationName.TabPanel.controller)，从任何控制器，你将能够访问组件使用Ext.ComponentQuery.query，如

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 app generate)生成

sencha generate app MyApp /path/to/MyApp

另一方面，如果你只是想在所有ExtJS应用程序中访问对象，请参阅我的问题及其答案

如何在没有循环引用的控制器之间共享对象/方法?