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. いいえ、あなたはしません。は、 andalias: 'widget.blah'の単純な省略形です。xtype: 'blah'Ext.widget('blah')
  3. ローダーはデフォルトでそれを行います
  4. ビューポートの中央にパネルを配置し、そのレイアウトをborderに設定し、子アイテムを構成し、それ自体のtbar / bbarを使用するだけです
于 2012-06-26T18:57:03.280 に答える