1

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

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

我的目录结构如下所示：

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

我的问题是：

  1. 如何创建布局并将部分分离到外部文件？
  2. 我必须为每个控件创建别名吗？有什么好处？
  3. 如何使用 Ext.Loader 按需更正加载组件（在我的例子中是接口的一部分）
  4. 如何将状态栏和工具栏添加到视口？我做对了吗？

最后我的布局正确吗？欢迎任何建议:)

4

1 回答 1

1

设置后，您的条形animCollapse: true将消失。此行为不取决于配置类型。尝试在嵌入式中启用它，酒吧会崩溃。

  1. 请参阅应用程序架构主题
  2. 不，你没有。alias: 'widget.blah'只是xtype: 'blah'和的简单简写Ext.widget('blah')
  3. 加载器默认为你做
  4. 只需在视口中心放置一个面板，将其布局设置为border，配置子项并使用自身的tbar / bbar
于 2012-06-26T18:57:03.280 回答