Extjs 4 MVC从控制器加载视图

Rob*_* P. 18 model-view-controller extjs

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

  1. 如何从控制器加载视图?
  2. 加载时如何将一些参数从控制器传递到视图?

任何帮助深表感谢.

Abd*_*oof 26

要加载视图,您可以使用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..
 });
Run Code Online (Sandbox Code Playgroud)

现在,当您想在用户控制器中创建实例时,您可以:

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

注意:请注意,没有'小部件'!它会自动添加到您传递的小部件名称中.

现在,考虑传递参数.与Ext.create方法一样,您应该能够传递任何参数:

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

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


The*_*ris 22

refs 用于创建新实例以及访问现有实例.通过向autoCreate: trueref 添加选项,如果没有现有组件与选择器匹配,则对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'
}],
Run Code Online (Sandbox Code Playgroud)

注意使用#来额外匹配itemId所以我可以引用相同xtype的多个实例

还有一个forceCreate: true选项可以使ref的getter 始终返回一个新实例,而autoCreate将在第一次检索时创建一个实例,然后继续返回相同的实例.


小智 6

如果我理解你的问题我认为你想使用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'
    }
],
Run Code Online (Sandbox Code Playgroud)

然后在课程中稍后您可以使用get访问此参考,即:

refreshGrid: function() {
    this.getList().store.load();
}
Run Code Online (Sandbox Code Playgroud)

在创建引用'list'时,将为您创建getList()方法.