ExtJS 4如何从另一个控制器/视图创建和显示新的控制器/视图?

时间:2011-11-23 20:30:53

标签: model-view-controller extjs

我查看了很多ExtJS 4 MVC的例子,他们几乎都表现出同样的东西:应用程序创建一个视口,在视图中加载,并定义了一个'控制器',init是控制器:< / p>

Ext.application({
    name: 'AM',

    controllers: [
        'Users'
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'userlist'
                }
            ]
        });
    }
});

太棒了,但现在让我们说在我的应用程序中我希望我的视图中包含一个按钮来打开一个全新的控制器/视图,你是怎么做到的?

我认为我正在寻找的是一种方式来说:   - 创建控制器(运行它的初始化代码)     - 在控制器初始化代码中,创建视图并显示它

这是正确的,你是怎么做到的?

我想澄清一下,在我的情况下,我需要SAME控制器/视图组合的两个单独实例。例如,我可能有一个带有选项卡面板和两个选项卡的视图。然后,我想在每个选项卡中放置两个“用户”控制器和“user.List”视图的单独实例。

2 个答案:

答案 0 :(得分:8)

  

我认为我正在寻找的是一种方式: - 创建控制器(运行它的初始化代码) - 在控制器初始化代码中,创建视图并显示它

在extjs中,所有控制器在加载应用程序时都会被实例化。您可以使用Application类中的启动方法来启动视图。并让控制器听取该视图的事件。在控制器中,您始终可以使用application对象访问另一个控制器:

 this.application.getController('ControllerName1').displayListPanel(options);

在上面的代码中,我调用了一个在ControllerName1控制器中可用的方法displayListPanel。此方法保存代码以在屏幕上显示视图(网格面板)。同样,我可以使用创建视图的方法,例如用于数据输入的新表单。这是另一个例子:

this.application.getController('ControllerName1').newDateForm();

和我的方法:

newDataForm : function() {

        var view = Ext.widget('form',{title: 'New Data'});
        view.show();
    },

答案 1 :(得分:2)

刚检查了新控制器和视图类的文档。

在我看来,您总是可以在需要时找到所需的视图。 例如,您可以:

//somewhere in controller
this.getView('Viewport').create(); // or .show()

检查并查看类方法:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller-method-getView