0

私はExtJS 5を学ぼうとしていますが、UIを適切なビューとviewControllerにスライスしようとして、すでに問題に遭遇しました。私のアプリケーションは、ボーダー レイアウトが 3 つのセクションに分割された 1 つのファイルで構成されています。各セクションを個別のモジュールにしたいのですが、それを行う正しい方法がわかりません。コントローラーとビューを追加して、アイテムの xtype をビューの xtype に変更しようとしましたが、空のパネルが表示されました。

境界レイアウトの「南」の部分は、独自のコントローラーに移動して開始しようとしているものです。

これが私のアプリケーションのスリム化されたバージョンです:

Ext.define('RpgInfoSystem.Application', {
    extend: 'Ext.app.Application',
    name: 'RpgInfoSystem',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            bodyBorder: false,
            defaults: {
                collapsible: true,
                split: true,
                bodyPadding: 5
            },
            // Here is where we require our modules
            //requires: ['RpgInfoSystem.Reference.controller.Reference'],
            // Here is where we insert our modules into the UI
            items: [{
                region: 'north',
                xtype: 'component',
                collapsible: false,
                resizeable: false,
                floatable: false,
                padding: 0,
                margin: 0,
                height: 25,
                minHeight: 25,
                maxHeight: 25,
                html: '<h1 style="margin: 0; padding: 0;">RPG Information System</h1>'
            }, {
                xtype: 'tabpanel',
                collapsible: false,
                region: 'center',
                margin: '5 0 0 0',
                items: [{
                    title: 'Initiative Tracker',
                    html: '<h2>Main Page</h2><p>This is where the main content will go. For players, this will be their character sheets. For the DM, this will be the initiative tracker.</p>'
                }, {
                    title: 'Templates',
                    html: 'Templates for NPCs and enemies, which can be copied into the initiative tracker.'
                }]
            }, {
                title: 'Utilities',
                xtype: 'panel',
                region: 'east',
                floatable: false,
                margin: '5 0 0 0',
                width: 300,
                minWidth: 100,
                //maxWidth: 250,
                layout: {
                    type: 'vbox',
                    pack: 'start',
                    align: 'stretch'
                },
                items: [{
                    title: 'Campaign Info',
                    xtype: 'tabpanel',
                    flex: 1,
                    margin: '0 0 1 0',
                    items: [{
                            title: 'Session',
                            html: 'A text area to enter notes for the campaign and scroll through other users\'s notes.'
                        }, {
                            title: 'Campaign',
                            html: 'Information about the current campaign, as well as the ability to take and edit notes.'
                        }
                    ]
                }]
            }, {
                title: 'Reference',
                xtype: 'mycustomview', //HERE IS WHERE I AM CUSTOMIZING
                region: 'south',
                floatable: false,
                height: 250,
                minHeight: 150,
                collapsed: true,
            }]
        });
    }
});

そして私のランチャー：

Ext.application({
    name: 'RpgInfoSystem',
    extend: 'RpgInfoSystem.Application',
    controllers: [
        'Reference'
    ]
});
4

2 に答える 2

0

まず、ウィジェットを別々のファイルに作成する必要があります。名前にも注意してください。アプリケーションが呼び出されRpgInfoSystem、ウィジェットが呼び出された場合は、アプリケーション ルートの下のディレクトリにファイルSection1を作成する必要があります。サブフォルダーが使用されている場合、その名前をクラスの名前に含める必要があります (例 -Section1.jsviewRpgInfoSystem.view.Panel1.Section1）。これが、Ext が存在しないファイルをロードしようとする理由です。また、ビュー コントローラーと通常のビュー コントローラー (ExtJs4 にあり、5 番目のまま) の違いを理解する必要がある重要な瞬間です。通常のものはイベントをリッスンしていますが、ビューコントローラーはビューから呼び出すことができるより多くの「関数の束」です。ビューモデルとビューコントローラーを配置する場所についての推奨事項は見つかりませんでした。少なくともルールとして宣言されていないため、好きな場所に配置できます。それらに関連するウィジェットの近くにそれらを作成することを好みます（したがって、3つのクラス（および適切なファイル）-ウィジェット（RpgInfoSystem.view.Section1）、モデル（RpgInfoSystem.view.Section1Model）、およびコントローラー（RpgInfoSystem.view.Section1Controller）があります）。次 - パネルでコンポーネントとウィジェットを使用する最良の方法がxtypeシステムであるとします (さらに深く掘り下げる場合は、ptypeプラグインとftype機能用ですが、今のところ必要ありません)。したがって、タブ パネルの次の構造とコードが得られます~/view/InitiativeTabs.js。

Ext.define(
    "RpgInfoSystem.view.InitiativeTabs",
    {
        requires: [
            "RpgInfoSystem.view.InitiativeTabsController",
            "RpgInfoSystem.view.InitiativeTabsModel"
        ],

        controller: "initiativetabsctrl",
        viewModel: "initiativetabsmodel",

        extend: 'Ext.tab.Panel', // this correspond for the xtype: 'tabpanel'
        alias: 'widget.initiativeTabs', // this would define xtype for THIS widget

        items: [{
            title: 'Initiative Tracker',
            html: '<h2>Main Page</h2><p>This is where the main content will go. For players, this will be their character sheets. For the DM, this will be the initiative tracker.</p>'
        }, {
            // suppose this would go into separate file too when would became a widget
            title: 'Templates',
            html: 'Templates for NPCs and enemies, which can be copied into the initiative tracker.',
            listeners: {
                render: 'someRandomFn' // call function from our controller
            }
        }]}
);

で~/view/InitiativeTabsController.js：

Ext.define("RpgInfoSystem.view.InitiativeTabsController",{
    extend : 'Ext.app.ViewController',
    alias: 'controller.initiativetabsctrl', // this allows to use our view controller in hm... view:)

    someRandomFn: function(){
        alert("some random fn called");
    }
});

で~/view/InitiativeTabsModel.js：

Ext.define(
    "RpgInfoSystem.view.InitiativeTabsModel",
    {
        extend: "Ext.app.ViewModel",

        alias: "viewmodel.initiativetabsmodel",
    }
);

そして最後にあなたのアプリ:

Ext.define('RpgInfoSystem.Application', {
    extend: 'Ext.app.Application',
    name: 'RpgInfoSystem',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            bodyBorder: false,
            defaults: {
                collapsible: true,
                split: true,
                bodyPadding: 5
            },
            // Here is where we require our modules
            //requires: ['RpgInfoSystem.Reference.controller.Reference'],
            // Here is where we insert our modules into the UI
            items: [{
                region: 'north',
                xtype: 'component',
                collapsible: false,
                resizeable: false,
                floatable: false,
                padding: 0,
                margin: 0,
                height: 25,
                minHeight: 25,
                maxHeight: 25,
                html: '<h1 style="margin: 0; padding: 0;">RPG Information System</h1>'
            }, {
                xtype: 'initiativetabs',
                collapsible: false, // this thee configs are related to the widget config in parent panel,
                region: 'center',  //  so for widget independence purposes 
                margin: '5 0 0 0', // suppose they must be here
            }, {
                title: 'Utilities',
                xtype: 'panel',
                region: 'east',
                floatable: false,
                margin: '5 0 0 0',
                width: 300,
                minWidth: 100,
                //maxWidth: 250,
                layout: {
                    type: 'vbox',
                    pack: 'start',
                    align: 'stretch'
                },
                items: [{
                    title: 'Campaign Info',
                    xtype: 'tabpanel',
                    flex: 1,
                    margin: '0 0 1 0',
                    items: [{
                            title: 'Session',
                            html: 'A text area to enter notes for the campaign and scroll through other users\'s notes.'
                        }, {
                            title: 'Campaign',
                            html: 'Information about the current campaign, as well as the ability to take and edit notes.'
                        }
                    ]
                }]
            }, {
                title: 'Reference',
                xtype: 'mycustomview', //HERE IS WHERE I AM CUSTOMIZING
                region: 'south',
                floatable: false,
                height: 250,
                minHeight: 150,
                collapsed: true,
            }]
        });
    }
});

http://dev.sencha.com/ext/5.0.0/examples/kitchensink/#data-bindingバインディングを理解するには、extjs の例も参照してください。

于 2014-12-30T10:36:09.780 に答える
0

「セクション」ごとに2つのファイルを作成するだけです

では、Section1.js (views/Section1.js に入ります)

Ext.define('RpgInfoSystem.view.Section1', {    
    extend: 'Ext.Component',
    alias: 'widget.Section1',
    itemId: 'Section1',
    region: 'north',
    collapsible: false,
    resizeable: false,
    floatable: false,
    padding: 0,
    margin: 0,
    height: 25,
    minHeight: 25,
    maxHeight: 25,
    html: '<h1 style="margin: 0; padding: 0;">RPG Information System</h1>'
});

次に、このセクションのコントローラーを作成する必要があります (controller/Section1.js に入ります)。

Ext.define('RpgInfoSystem.controller.Section1', {
    extend: 'Ext.app.Controller',
    views: ['Section1']
    ....
});

そして、あなたのビューポートのアイテムで:

items: [Ext.widget('Section1'), Ext.widget('Section2')] //and so on

Application.js ファイルに、次の構成オプションがあることを確認します。

views: ['RpgInfoSystem.view.Section1', 'RpgInfoSystem.view.Section2'],
controllers: ['RpgInfoSystem.controller.Section1', 'RpgInfoSystem.controller.Section2']

すべての UI 要素に対してこれを行うことができますが、私も専門家ではないため、どの時点でやり過ぎになるかはわかりません。

V5 はまだ試していませんが、おそらく役に立ちます

http://www.sencha.com/blog/ext-js-5-mvc-mvvm-and-more

于 2014-08-13T16:53:43.070 に答える