ExtJS 5将视图拆分为控制器

我试图学习ExtJS5，但已经遇到了一个问题，试图将我的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,
            }]
        });
    }
});

---

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

在中，Section1.js进入视图/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>'
});

在视口的项目中：

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，但这可能会有所帮助

---

首先，您需要在单独的文件中创建小部件。还要注意名称，所以如果应用程序名为RpgInfoSystem，小部件名为Section1，则需要在应用程序根目录下的视图目录中创建Section1.js文件。如果使用了子文件夹，则它们的名称应包含在类的名称中示例-RpgInfoSystem.view.Panel1.Section1。这就是为什么Ext可以尝试加载未列出的文件。 另外，关键的一点是，您应该理解视图控制器和常规控制器之间的区别，这些控制器已经在ExtJs4中出现，现在仍然在第五个。常规的是监听事件，而视图控制器则是更多的可以从视图中调用的一系列函数。我没有找到任何关于在何处放置视图模型和视图控制器的建议，至少它没有声明为规则，所以您可以将其放置在任何您想要的地方。我更喜欢在与其相关的小部件附近创建它们，因此我有三个适当的类和文件-widgetRpgInfoSystem.view.Section1、model RpgInfoSystem.view.Section1模型和controller RpgInfoSystem.view.Section1控制器。 下一步-假设在面板中使用组件和小部件的最佳方式是xtype SYSTEM，如果您深入研究，您还可以找到插件的ptype和功能的ftype，但目前不需要。 因此，您将拥有选项卡面板的下一个结构和代码： 在~/view/InitiativeTabs.js中：

在~/view/InitiativeTabsModel.js中：

最后是你的应用程序：

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示例以了解绑定

好的，我尝试过这个，但出于某种原因，它似乎希望文件位于/app/widget/Section1.js中…@Wige不幸的是，我还没有深入研究ExtJS5，而JSFIDLE的框架选择中还没有包含它，因此我无法测试它。我在回答中修改了视图控制器配置，不过您可能想再试一次。还要确保您已经构建了应用程序sencha应用程序构建

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

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

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");
    }
});

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