Javascript 将窗格移动到外部类时Ext JS布局崩溃

这是我在Ext JS中的第一个大项目，请理解：） 我正在基于门户示例构建一个应用程序。我需要创建的是简单的布局，上面有工具栏，底部有状态栏，tabpanel占据整个屏幕。像这样：

基本思想是将每个大控件放在单独的文件中，这样就可以很容易地更改应用程序的某些部分

我的目录结构如下所示：

root
--layout.html
--js
----App.js
----Components
------StatusBar.js
------UserInfo.js
------MenuBar
--------UserMenuBar.js
------Dashboard
--------UserDashboard.js

Ext.define('Holidays.Components.Dashboard.UserDashboard', {
extend: 'Ext.panel.Panel',
alias: 'widget.UserDashboard',
layout: 'border',
padding: 5,
closable: false,
title: 'Holiday planner',
initComponent: function () {

    this.tree = Ext.create("Ext.panel.Panel", {
        region: 'west',
        split: true,
        title: 'Categories',
        width: 300,
        collapsible: true,
        animCollapse: false
    });

    //this.tree = Ext.create("Holidays.Components.UserInfo");THIS WON'T WORK :(


    this.grid = Ext.create("Ext.panel.Panel", {
        title: 'Plan urlopu',
        region: 'center',
        split: true,
    });

    this.history = Ext.create("Ext.panel.Panel", {
        collapsed: true,
        collapsible: true,
        region: 'east',
        split: true,
        width: 300,
        animCollapse: false,
        title: 'test'
    });

    this.items = [this.tree, this.grid, this.history];

    this.callParent();
},

getScheduler: function () {
    return this.grid;
}
});

我的App.js如下所示：

Ext.ns('Holidays');

Ext.Loader.setConfig({
enabled: true,
disableCaching: true
});

Ext.Loader.setPath('Holidays', 'js');
Ext.Loader.setPath('Holidays.Components', 'js/Components');
Ext.Loader.setPath('Ext.ux', 'js/ux');

Holidays.application = null;

Ext.application({
name: "Holidays",
launch: function () {
    Holidays.application = this;
    this.createLayout();
    Holidays.application = this;
    Ext.fly(document.body).on('contextmenu', this.onContextMenu, this);
},
onContextMenu: function (e, target) {
    if (!e.ctrlKey) {
        e.preventDefault();
    }
},

createLayout: function () {

    this.menuBar = Ext.create("Holidays.Components.MenuBar.UserMenuBar");
    this.statusBar = Ext.create("Holidays.Components.StatusBar");
    this.centerView = Ext.create("Holidays.Components.Dashboard.UserDashboard");

    this.centerPanel = Ext.create("Ext.tab.Panel", {
        xtype: 'tabpanel',
        border: false,
        region: 'center',
        bodyStyle: 'background:#DBDBDB',
        plugins: Ext.create('Ext.ux.TabCloseMenu')

    });

    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
            xtype: 'panel',
            border: false,
            layout: 'border',
            items: [
            this.centerPanel],
            bbar: this.statusBar,
            tbar: this.menuBar
        }]

    });

    this.addItem(this.centerView);
},

addItem: function (item) {
    this.centerPanel.add(item);
    item.show();
},

getStatusbar: function () {
    return this.statusBar;
},

getCenterView: function () {
    return this.centerView;
}
});

Holidays.getApplication = function () {
return Holidays.application;
};

Dashboard.js看起来是这样的：

root
--layout.html
--js
----App.js
----Components
------StatusBar.js
------UserInfo.js
------MenuBar
--------UserMenuBar.js
------Dashboard
--------UserDashboard.js

Ext.define('Holidays.Components.Dashboard.UserDashboard', {
extend: 'Ext.panel.Panel',
alias: 'widget.UserDashboard',
layout: 'border',
padding: 5,
closable: false,
title: 'Holiday planner',
initComponent: function () {

    this.tree = Ext.create("Ext.panel.Panel", {
        region: 'west',
        split: true,
        title: 'Categories',
        width: 300,
        collapsible: true,
        animCollapse: false
    });

    //this.tree = Ext.create("Holidays.Components.UserInfo");THIS WON'T WORK :(


    this.grid = Ext.create("Ext.panel.Panel", {
        title: 'Plan urlopu',
        region: 'center',
        split: true,
    });

    this.history = Ext.create("Ext.panel.Panel", {
        collapsed: true,
        collapsible: true,
        region: 'east',
        split: true,
        width: 300,
        animCollapse: false,
        title: 'test'
    });

    this.items = [this.tree, this.grid, this.history];

    this.callParent();
},

getScheduler: function () {
    return this.grid;
}
});

如果我将左侧面板移动到外部文件I，则在折叠和折叠面板并尝试恢复工具栏和状态栏消失时，我的布局崩溃面板不应具有动画：/

这是我的密码：

我的问题是:

如何创建布局并将零件分离到外部文件

我必须为每个控件创建别名吗？有什么好处

如何使用Ext.Loader按需正确加载组件（在我的例子中是接口的一部分）

如何将状态栏和工具栏添加到视口？我做得对吗

---

最后，我的布局正确吗？欢迎提供任何建议：）

当设置了

animCollapse:true

时，您的条形图将消失。此行为不取决于配置类型。尝试在嵌入的一个中启用它，条将崩溃

参见主题

不，你没有

alias:'widget.blah'

只是

xtype:'blah'

和

Ext.widget（'blah'）

默认情况下，Loader会为您执行此操作

只需在视口的中心放置一个面板，将其布局设置为

边框

，配置子项并使用/本身

---

设置

animCollapse:true

时，条形图消失。此行为不取决于配置类型。尝试在嵌入的一个中启用它，条将崩溃

参见主题

不，你没有

alias:'widget.blah'

只是

xtype:'blah'

和

Ext.widget（'blah'）

默认情况下，Loader会为您执行此操作

只需在视口的中心放置一个面板，将其布局设置为

边框

，配置子项并使用/本身

---

所以我不能使用动画：真的吗？我知道我没有使用严格的MVC架构，但是我应该如何修复我的布局呢？：）嗯，我想你应该试着完全重写你的布局。我从来没有见过这样奇怪的行为，通常它工作得很好。最奇怪的是，当我把所有的东西都放在一个文件中时，它工作得很好，把它分开会产生我的问题。我将尝试第二次重新创建整个过程，可能是一个小错误：）所以我不能使用动画崩溃：真的？我知道我没有使用严格的MVC架构，但是我应该如何修复我的布局呢？：）嗯，我想你应该试着完全重写你的布局。我从来没有见过这样奇怪的行为，通常它工作得很好。最奇怪的是，当我把所有的东西都放在一个文件中时，它工作得很好，把它分开会产生我的问题。我将尝试第二次重现整个过程，可能是一个小小的错误：）