javascript - 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>

文件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
}

Answer 1

如果您只是想在不同的物理文件中分离 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 app generate)生成

sencha generate app MyApp /path/to/MyApp

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

How to share objects/methods between controllers without circular references?