Extjs 4 MVC 从控制器加载视图答案

【问题标题】：Extjs 4 MVC loading a view from controllerExtjs 4 MVC 从控制器加载视图
【发布时间】：2011-05-04 21:50:20
【问题描述】：

好的，所以我有一个控制器，其中包含我想要加载视图的方法。

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

非常感谢任何帮助。

【问题讨论】：

标签： model-view-controller extjs

【解决方案1】：

要加载视图，您可以使用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：refs 可帮助您获取对页面上视图的引用。它们无助于创建实例或加载视图。如果你渲染了你的视图，你可以利用 ref 系统来获取那个实例并操作视图。您需要使用ComponentQuery 来获取您的视图的参考。

【讨论】：

这回答了如何从 Controller 创建视图，但是如何将它加载到当前视图？我试过 this.getViewportContent().insert(Ext.widget('templatecategorycreate')); getViewportContent() 返回我想将该视图添加到的位置。它不起作用。
正如下面的答案所示，refs 确实可以帮助您创建适当的实例
@Cine：参考是在 4.1 中添加的。在撰写此答案时，它们不是 api 的一部分。
@sahroozjefri 您需要指定您认为此答案有什么问题，或者在什么时候需要更多信息。唯一缺少“abdelolakara”的一点（因为 sencha 已经改变了它）是现在的 refs 也能够创建实例。但这只不过是对“abdelolakara”所写内容的包装。此外，您需要提供有关您想要答案的版本的更多信息。到目前为止，4.x 和 4.1.x 之间存在巨大差异。总而言之，我不明白你为什么在这里提供赏金。

【解决方案2】：

refs 可以用于创建新实例以及访问现有实例。通过将选项 autoCreate: true 添加到您的 ref，如果没有现有组件与选择器匹配，则对 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 选项可以使引用的getter总是返回一个新实例，如果没有它，autoCreate 将在第一次检索时创建一个实例，然后继续返回同一个实例。

【讨论】：

这真是太好了。一件事，一定要加xtype，否则Extjs不会知道你要创建什么。我没有看到这个记录。是否担心没有记录意味着它可能会在未来的版本中消失？
@JohnGordon 不，xtype 选项来自这样一个事实，即当您将 autoCreate 或 forceCreate 设置为 true 时，ref 的整个配置对象将作为配置对象传递给 Ext.widget()组件，该组件又支持 xtype 用于指定要实例化的对象的类。此外，它似乎确实记录在 Ext.app.Controller#cfg-refs 下

【解决方案3】：

如果我理解您的问题，我认为您想使用 refs，请查看 Ext.app.Controller 的文档：http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.app.Controller.html

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

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

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

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

当您创建 'list' 的引用时，会为您创建 getList() 方法。

【讨论】：

不，你错了。 ref system 仅用于获取对现有视图或组件实例的引用。它们不能用于实例化视图！
@AbdelOlakara：不幸的是，你错了。根据上面提供的链接，此答案完全是从文档中复制粘贴的。如果您阅读文档，您会看到实例化是可选的，但完全受支持。（同时检查当前版本的 ExtJs 甚至更多关于 refs 行为的选项。）

【解决方案4】：

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

即使在视图被销毁后也能正常工作 - 将创建一个新视图。

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

现在，我所有的控制器都可以通过控制器代码轻松访问他们的视图，而无需任何外部变量。

【讨论】：

什么是this.views？您预先定义的数组？为什么你总是在var view = this.getView(this.views[0]); 中检索第一个视图？否则这是一个很好的主意。为你 +1。
this.views 实际上是您在控制器本身上定义的列表。 this.views[0] 返回第一个视图（'string'）（这应该是你唯一的视图，或者你的“主”视图）。在 Sencha 的 example 中，您可以看到他们如何在其控制器上定义一组视图（字符串）。

【解决方案5】：

使用Ext.create('要打开的正确文件名',param1 = me);

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

EG：Ext.create('view.HelloOverlay, param1 = "Hello", param2 = "World"); 在 HelloOverlay 的控制器中，使用 this.param1 将给出“Hello”，this.param2 将给出“World”。

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

【讨论】：