2

我非常简单地了解 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()似乎给你相同的网格视图。但如果：

  1. 我想动态创建多个网格视图实例，如何？按照惯例，我应该在哪里存储它们？

  2. 对于我创建的每个视图，我想给它一个配置对象，就像我做的那样，Ext.create(somecontrol, config);但是在 MVC 中，它们在 refs 中？我在哪里为我创建的每个视图实例插入这个配置对象？

  3. 我有一家商店Contacts，所有这些视图与商店有什么关系？每个人一个，还是所有人共享一个商店？

非常感谢。

4

2 回答 2

2

对于所有这些，答案将是“视情况而定”，

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

    就“存储”这些视图而言，惯例是为您的视图提供一个唯一的 id，以便您以后可以引用它，类似于 DOM 查找。但是您显然也可以将对组件的引用存储在变量中。这真的取决于你在做什么。如果控制器正在构建一堆动态元素，那么只保留对控制器中这些元素的引用可能是有意义的。

  2. 视图通常在 MVC 方法下在它们自己的文件中定义，本质上这是一个带有配置的 Ext.define 块。Sencha 站点上有一些示例 MVC 应用程序，我建议您查看它们。

  3. 这真的取决于你在做什么。如果您有多个联系人视图，则让多个视图引用单个商店可能是有意义的，但一般来说，商店代表特定数据的集合。喜欢书籍、联系人或员工。因此，如果视图需要显示 Books 和Employees，那么在视图中引用这些商店是有意义的。

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

如果您刚刚开始使用 ExtJS 和他们的 MVC 实现，我强烈建议您使用 Sencha Architect。我不会用它构建一个真正的项目，但它非常适合将快速的小演示应用程序放在一起，它会为你生成一个 MVC 结构。看看它为您提供了什么，并查看 Sencha 网站上的演示应用程序。

于 2013-05-06T14:30:54.340 回答
0

这里还有一些代码可以解释。在我的示例中，按钮文本配置设置为“ZZZ”。在我的示例中，从视图“view-XXX”（xtype）实例化的组件扩展了“Ext.window.Window”。如果在视图中实例化组件，则 Ext.create 在通过 xtype 配置使用延迟实例化时是隐式的。如果在控制器中实例化一个组件，我使用标准符号 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();
                    }
                }
            },

        });
    },

});
于 2013-10-07T16:16:45.933 回答