Question

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

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

非常感谢任何帮助。

Answer 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系统来获取该实例并操纵视图。您需要使用ComponentQuery来获取您的观点的参考。

Answer 2

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将在第一次检索时创建一个实例，然后继续返回相同的实例

Answer 3

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

基本上你使用css选择器创建一个refs列表：

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

然后在课堂上你可以使用get，即：

来访问这个ref

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

当您创建ref为'list'时，将为您创建getList（）方法。

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

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

Answer 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

Extjs 4 MVC从控制器加载视图

5 个答案: