Question

我非常简短地了解ExtJs中的MVC概念。你能帮我填补知识空白吗？我只知道如何以这种方式创建单个视图...

Ext.define('My.controller.Contacts', {
    extend: 'Ext.app.Controller',
    stores: ['Contacts'],
    views: ['ContactsGrid'],
    refs: [{ref: 'grid', selector: '', xtype: 'contacts-grid', autoCreate: true}],

    getGrid: function() {
        var g = this.getGrid();
        return g;
    }
});

this.getGrid()似乎为您提供了相同的网格视图。但是如果：

我想动态创建多个网格视图实例，怎么做？我按照惯例在哪里存储它们？
对于我创建的每个视图，我想给它一个配置对象，就像我做Ext.create(somecontrol, config);但是这个案例在MVC中它们在refs中？在哪里为我创建的每个视图实例插入此配置对象？
我有一个商店Contacts，所有这些视图与商店之间的关系是什么？一个或一个共享一个商店？

非常感谢。

Answer 1

对于所有这些，答案将是“它取决于”，

我会在视图定义中创建动态视图，如果它是您在启动时读取的内容，否则如果您单击按钮并添加视图元素，则可以在控制器中包含所有内容，或者您可以拥有控制器在实际创建视图的视图上调用方法。我可能会选择后者，但这取决于你想如何封装你的视图逻辑。

就“存储”这些视图而言，惯例是为视图提供唯一的ID，以便稍后引用它，类似于DOM查找。但是你也可以明显地存储对变量中组件的引用。这真的取决于你在做什么。如果控制器正在构造一堆动态元素，那么只需要保持对控制器中这些元素的引用即可。
视图通常在MVC方法下的自己的文件中定义，实质上这是一个Ext.define块，其中包含配置。 Sencha网站上有一些示例MVC应用程序，我建议您查看它们。
这实际上取决于你的所作所为。如果您有多个“联系人”视图，则可以通过多个视图引用单个存储，但通常情况下，存储表示特定数据的集合。喜欢图书，联系人或员工。因此，如果视图需要显示Books和Employees，那么在视图中引用这些商店是有意义的。

我认为你要问的关键是我在哪里封装动态视图的逻辑。 我建议创建可重复使用的视图组件来封装您的显示逻辑，让控制器创建这些组件并为他们提供填充数据。这为您提供了一个非常灵活的关注点分离。

如果您刚刚开始使用ExtJS及其MVC实现，我强烈建议您使用Sencha Architect。我不会用它构建一个真正的项目，但它很适合将快速的小型演示应用程序放在一起，并为您生成MVC结构。看看它给你的东西，并看看Sencha网站上的演示应用程序。

Answer 2

这里有一些代码可以解释。在我的示例中，按钮文本配置设置为“ZZZ”。从视图'view-XXX'（xtype）实例化的组件在我的示例中扩展了'Ext.window.Window'。如果在视图中实例化组件，则在通过xtype config使用延迟实例化时，Ext.create是隐式的。如果在控制器中实例化组件，我使用标准表示法Ext.create。如果要提供id，请使用Ext.id（）动态生成组件的id。我不会重复@James对＃2和＃3的回答。

试试这个：

Ext.define('App.controller.ControllerExample', {
    extend : 'Ext.app.Controller',

    stores: ['XXXs', 'YYYs'],
    models: ['XXX', 'YYY'],

    refs : [{
        ref: 'viewport',
        selector: 'view-viewport'
    }, {
        ref: 'XXX',
        selector: 'view-XXX-window'
    }, {
        ref: 'YYY',
        selector: 'view-YYY'

    }],

    init : function() {

        this.control({

            'view-XXX-window': {

                minimize: function(win, obj) {

                    this.getXXX().hide();
                },

                close: function(panel, eOpt) {

                    this.getXXX().hide();
                }
            },

            'view-XXX-window button[text=ZZZ]': {

                click: function() {

                    var XXX = this.getXXX();

                    if (XXX === undefined) {

                        var viewportWidth = this.getViewport().getWidth();
                        var viewportHeight = this.getViewport().getHeight();
                        var windowWidth = viewportWidth * 0.9;
                        var windowHeight = viewportHeight * 0.9;
                        var x = (viewportWidth / 2) - (windowWidth / 2);
                        var y = (viewportHeight / 2) - (windowHeight / 2);

                        XXX = Ext.create('App.view.XXX', {
                            x: x,
                            y: y,
                            width: windowWidth,
                            height: windowHeight
                        });

                        XXX.show();

                    }
                    else {

                        XXX.show();
                    }
                }
            },

        });
    },

});

ExtJs如何在一个控制器下创建和管理动态视图

2 个答案: