Question

我正在尝试学习ExtJS 5，并且已经遇到问题，尝试将我的UI切片到适当的视图和viewControllers中。我的应用程序由一个文件组成，边框布局分为三个部分。我想将每个部分变成一个单独的模块，但我不确定这样做的正确方法。我尝试简单地添加一个Controller和View，并将项目的xtype更改为视图的xtype，但我只是一个空面板。

＆＃34;南部＆＃34;边框布局的一部分是我想要移动到自己的控制器，开始。

以下是我的应用程序的精简版：

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

Answer 1

只需为每个＆＃39;部分＆＃39;

创建两个文件

In，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

Answer 2

首先，您需要在单独的文件中创建小部件。还要注意名称，因此如果您的应用程序名为RpgInfoSystem并且您的小部件名为Section1，则需要在应用程序根目录下的Section1.js目录中创建view文件。如果使用子文件夹，则应将其名称包含在类的名称中（例如 - RpgInfoSystem.view.Panel1.Section1）。这实际上是为什么Ext可以尝试加载未显示的文件。关键时刻你应该理解视图控制器和常规控制器之间的区别（它们已经在ExtJs4中并保持在第5个）。普通人正在听事件，而视图控制器更多的是＆＃34;一堆功能＆＃34;可以从视图中调用。我没有找到关于放置视图模型和视图控制器的位置的任何建议，至少未将其声明为规则，因此您可以将其放置在任何您想要的位置。我更喜欢在与它们相关的小部件附近创建它们（所以我有三个类（和文件适当） - 小部件（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,
            }]
        });
    }
});

另请参阅extjs示例以了解绑定http://dev.sencha.com/ext/5.0.0/examples/kitchensink/#data-binding

ExtJS 5将视图拆分为控制器

2 个答案: