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元素定义，您可以而且应该使用视图。

在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'
    ...
});

您创建了一个视图（当然还有各自的控制器，即：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应用程序中访问对象，请参阅我的问题及其答案

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

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

1 个答案: