extjs - ExtJS 5 将视图拆分为控制器

Question

我正在尝试学习 ExtJS 5，并且已经遇到了一个问题，试图将我的 UI 分割成适当的视图和视图控制器。我的应用程序包含一个文件，其边框布局分为三个部分。我想把每个部分变成一个单独的模块，但我不确定这样做的正确方法。我尝试简单地添加一个控制器和视图，并将项目的 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'
    ]
});

score 0 · Accepted Answer

只需为每个“部分”创建两个文件

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

然后你需要为这个部分创建控制器（进入控制器/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

score 0 · Accepted Answer

首先，您需要在单独的文件中创建小部件。还要注意名称，所以如果您的应用程序被调用RpgInfoSystem并且您的小部件被调用，Section1您需要在应用程序根目录下的目录中创建Section1.js文件。view如果使用子文件夹，它们的名称应包含在您的类的名称中（例如 -RpgInfoSystem.view.Panel1.Section1）。这就是为什么 Ext 可以尝试加载不存在的文件的原因。也是您应该了解视图控制器和常规视图控制器之间区别的关键时刻（已经在 ExtJs4 中并保留在第 5 个）。普通人正在监听事件，而视图控制器是更多可以从视图中调用的“一堆函数”。我没有找到任何关于放置视图模型和视图控制器的建议，至少它没有被声明为规则，所以你可以将它放置在任何你想要的地方。我更喜欢在与它们相关的小部件附近创建它们（所以我有三个类（和适当的文件） - 小部件（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 - ExtJS 5 将视图拆分为控制器

2 回答 2

Related

Reference