Model view controller Extjs 4 MVC从控制器加载视图

好的，我有一个控制器，它有一个加载视图的方法

如何从控制器加载视图

加载视图时，如何将一些参数从控制器传递到视图

---

非常感谢您的帮助。

如果我理解您的问题，我认为您希望使用refs，请查看Ext.app.Controller的文档：

基本上，您可以使用css选择器创建引用列表：

refs: [
    {
        ref: 'list',
        selector: 'grid'
    }
],

然后，在本课程的后面，您可以使用get访问此ref，即：

refreshGrid: function() {
    this.getList().store.load();
}

---

当您创建对“列表”的引用时，会为您创建getList（）方法。

要加载视图，可以使用

Ext.widget（）

。使用

Ext.define（）

在视图文件中创建视图。我建议使用

alias

属性为视图定义内联xtype

需要加载视图时，可以使用

Ext.widget（）

创建一个视图，并指定xtype（视图的别名）。以下是一个例子：

 // define a window
 Ext.define('MyApp.view.user.Add',
    extend: 'Ext.window.Window',
    alias : 'widget.adduser',
    .
    . // Add other properties, custom properties, methods, event handlers etc..
 });

现在，如果要在用户控制器中创建实例，请执行以下操作：

// create an instance
 var view = Ext.widget('adduser'); // refer the below note!

注意：注意没有“小部件”！它会自动添加到您传递的小部件名称中

现在，我们来谈谈传递参数。与Ext.create方法一样，您应该能够通过以下方式传递任何参数：

 // create an instance with params
 var view = Ext.widget('adduser', {title: 'New User title'});

---

关于ref：ref可帮助您获取对页面上视图的引用。它们无助于创建实例或加载视图。如果已渲染视图，则可以使用ref系统获取该实例并操纵视图。您需要使用来获取视图的引用

我遇到了同样的问题。我在抽象基控制器上创建了一个方法，用于检索视图实例，并在其不存在时创建

这将正常工作，即使在视图已被破坏-一个新的将被创建

Ext.define('My.controller.Base', {
    extend: 'Ext.app.Controller',

    //Retrieves an instance of the top-level view
    //If it has not been created yet than one is instantiated
    //Also, overrides the .close() method on the view to 
    //null out the instance reference on the controller (very necessary)
    getViewInstance: function () {
        var self = this;

        if(!this.viewInstance) {
            if(this.views && this.views.length) {

                var view = this.getView(this.views[0]);

                this.viewInstance = view.create();

                this.viewInstance.close = function () {
                    view.prototype.close.apply(this, arguments);
                    self.viewInstance = null;
                };

            } 
        }

        return this.viewInstance;
    }
});

---

现在，我的所有控制器都可以轻松地从没有任何外部变量的控制器代码访问它们的视图

refs可用于创建新实例以及访问现有实例。通过向ref添加选项

autoCreate:true

，如果没有与选择器匹配的现有组件，则调用getter将导致使用ref定义作为其配置创建新实例

refs: [{
    ref: 'list'
    ,selector: 'myusersgrid#users'
    ,autoCreate: true

    // any additional options get passed as config when an instance needs to be created
    ,xtype: 'myusersgrid'
    ,itemId: 'users'
    ,store: 'Users'
    ,title: 'Users'
},{
    ref: 'otherList'
    ,selector: 'myusersgrid#administrators'
    ,autoCreate: true

    // any additional options get passed as config when an instance needs to be created
    ,xtype: 'myusersgrid'
    ,itemId: 'administrators'
    ,store: 'SpecialUsers'
    ,title: 'Special Users'
}],

注意使用#来额外匹配itemId，这样我就可以对同一xtype的多个实例进行引用

还有一个

forceCreate:true

选项，它将使ref的getter始终返回一个新实例，如果没有它，autoCreate将在第一次检索时创建一个实例，然后继续返回同一个实例。

使用Ext.create（'要打开的正确文件名'，param1=me）

在新创建的视图中，使用this.param1访问参数

例如：Ext.create（'view.HelloOverlay，param1=“你好”，param2=“世界”） 在HelloOverlay的控制器中，使用this.param1将给出“Hello”，this.param2将给出“World”

---

有时传递的参数会出现在视图中，因此请使用this.getView（）.paramName

不，您错了。ref系统仅用于获取对视图或组件的现有实例的引用。它们不能用于实例化视图@阿布德洛拉卡拉：不幸的是你错了。此答案完全是根据上述链接从文档中复制粘贴的。如果您阅读文档，您将看到实例化是可选的，但完全受支持。（还要检查ExtJs的当前版本，甚至更多关于引用行为的选项。）这回答了如何从控制器创建视图，但如何将其加载到当前视图？我尝试了这个.getViewportContent（）.insert（Ext.widget（'templatecategorycreate'）；where getViewportContent（）返回要将该视图添加到的位置。正如下面的答案所示，REF确实可以帮助您创建适当的instances@Cine：4.1中添加了参考。在撰写此答案时，它们不是api的一部分。@sahroozjefri您需要指定您认为此答案有什么问题，或者您需要更多信息。“abdelolakara”缺少的唯一一点（因为sencha已经改变了它）是refs现在也能够创建实例。但这不过是“阿布德洛拉卡拉”所写内容的包装而已。此外，你需要提供更多关于你想要答案的版本的信息。到目前为止，4.x和4.1.x之间存在巨大差异。总而言之，我不明白你为什么在这里悬赏。这真的很好。有一件事，一定要添加

xtype

，否则Extjs将不知道要创建什么。我没有看到这方面的记录。是否担心未记录意味着它可能会在未来的版本中消失？@JohnGordon否，xtype选项来自这样一个事实：当您将autoCreate或forceCreate设置为true时，ref的整个配置对象将作为组件的配置对象传递给Ext.widget（），这反过来又支持xtype来指定要实例化的对象的类。此外，它似乎记录在Ext.app.Controller#cfg refsWhat

this.views

下？您预先定义的数组？为什么总是在

var view=this.getView（this.views[0]）中检索第一个视图？否则这是个不错的主意+1'ed you.
this.views
实际上是您在控制器本身上定义的列表
this.views[0]
返回第一个视图（“字符串”）（这实际上应该是您的唯一视图，或“主”视图）。在Sencha中，您可以看到他们如何在控制器上定义视图（字符串）数组。