Question

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

基本思想是将每个大控件放在单独的文件中，以便更改应用程序的某些部分。

我的目录结构如下：

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

我的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看起来像这样：

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;
}
});

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

这是我的代码：http://dl.dropbox.com/u/1206389/layout.zip

我的问题是：

如何创建布局并将部件分离到外部文件？
我必须为每个控件创建别名吗？有什么好处？
如何使用Ext.Loader按需更正负载组件（在我的情况下是接口的一部分）
如何向Viewport添加状态栏和工具栏？我做得对吗？

最后我的布局是否正确？欢迎任何建议：）

Answer 1

设置animCollapse: true后，您的酒吧会消失。此行为不依赖于配置类型。尝试在嵌入式中启用它，并且栏会崩溃。

请参阅Application Architecture主题
不，你没有。 alias: 'widget.blah'只是xtype: 'blah'和Ext.widget('blah')
默认情况下Loader为您执行
只需将面板放在视口中心，将其布局设置为border，配置子项并使用自己的tbar / bbar

将面板移动到外部类时，Extjs布局崩溃

1 个答案: