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

我对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（）

似乎为您提供了相同的网格视图。但如果：

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

对于我创建的每个视图，我想给它一个config对象，比如我如何

Ext.create（somecontrol，config）但在MVC中，它们在参考中？我在哪里为我创建的每个视图实例插入这个配置对象

我有一个商店

联系人

，所有这些视图与商店之间的关系是什么？一个一个，还是全部共享一个店铺

---

非常感谢。

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

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

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

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

这真的取决于你在做什么。如果您有多个Contacts视图，那么让一个存储被多个视图引用可能是有意义的，但在一般情况下，存储表示特定数据的集合。比如书籍、联系人或员工。因此，如果视图需要显示书籍和员工，那么在视图中引用这些商店是有意义的

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

---

如果您刚刚开始使用ExtJS及其MVC实现，我强烈建议您使用Sencha Architect。我不会用它来构建一个真正的项目，但它非常适合组装快速的小演示应用程序，并且它可以为您生成一个MVC结构。看看它给了你什么，看看Sencha网站上的演示应用程序。

这里还有一些代码要解释。在我的示例中，按钮文本配置设置为“ZZZ”。在我的示例中，从视图'view XXX'（xtype）实例化的组件扩展了'Ext.window.window'。如果在视图中实例化组件，则通过xtype config使用惰性实例化时Ext.create是隐式的。如果在控制器中实例化组件，我将使用标准符号Ext.create。如果要提供id，请使用Ext.id（）为组件动态生成id。我不会重复“詹姆斯”对第二和第三题的回答

试试这个：

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

        });
    },

});

---

我还不能接受这个答案。你是对的“创建封装显示逻辑的可重用视图组件并让控制器创建这些组件”这是我实际上不知道如何编码的，在web上找不到任何示例…我对MVC有基本的了解，也了解DeftJs，使用Sencha Architect 2构建了几个简单的项目。然而，extjs4mvc结构一直是我的知识空白，特别是如何在控制器现场创建动态视图。你能给我看一些代码吗？@Tom，如果你找不到示例，我建议你直接去找源代码看看Sencha ExtJS代码库。几乎所有的视图组件都使用组件层次结构，应该为您提供如何扩展该层次结构的示例。这就是我学习如何使用ExtJS的基本方法。