在ExtJS 4 MVC中使用多个控制器

Question

假设我有一个主控制器,那么我的应用程序为每个"模块"都有一个控制器.这个主控制器包含视口,然后是一个标题(带有一个菜单)+一个"居中"的容器,它在开头是空的.

菜单中的单击将更改当前模块/控制器,并且adhoc视图(属于此控制器)将显示在居中容器中.

我认为这是一个非常简单的场景,但奇怪的是我没有找到合适的方法来做到这一点.有任何想法吗？非常感谢!

Answer 1

以下是我的工作:我在顶部有一个工具栏,左侧导航,中心位置是您提到的工作区域(基本上是一个标签面板).让我们看看应用程序的每个部分并解释.首先,这是我的视口的样子:

Ext.define('App.view.Viewport',{
    extend: 'Ext.container.Viewport', 
    layout: 'border',
    requires: [
        'App.view.menu.NavigationPane',
        'App.view.CenterPane',          
        'App.view.menu.Toolbar'
    ], 
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                region: 'north',
                xtype: 'panel',                 
                height: 24,                                     
                tbar: Ext.create('App.view.menu.Toolbar')                                       
            },{
                title: 'Navigation Pane',
                region: 'west',
                width: 200,
                layout: 'fit',
                collapsible: true, 
                collapsed: true,
                items: Ext.create('App.view.menu.NavigationPane')                                       
            },{
                region: 'center',                                               
                xtype: 'centerpane'                                     
            }]       
         });

        this.callParent(arguments);
     }
});

您可以看到我有一个带有菜单和左侧导航的工具栏(App.view.menu.Toolbar)(App.view.menu.NavigationPane).这两个组件组成了我的主菜单或其他模块的网关.用户选择菜单项,并将相应的模块视图(如表单,网格,图表等)加载到"centerpane"中.centerpane只是Ext.tab.Panel的派生类.

就像你说的,我有一个主控制器,处理工具栏和导航窗格中的所有请求.它仅处理工具栏和导航窗格的单击操作.这是我的AppController:

Ext.define('CRM.controller.AppController',{
    extend: 'Ext.app.Controller',    
    init: function() {

        this.control({   

            'apptoolbar button[action="actionA"]' : {
                     click : function(butt,evt) {
                             this.application.getController('Controller1').displayList();
                     }
             },  
             .
             .  // Add all your toolbar actions & navigation pane's actions...
             .           
             'apptoolbar button[action="actionB"]' : {
                     click : function(butt,evt) {
                            this.application.getController('Controller2').NewRequest(); 
                     }
             }
        });     
     } 
 });

看看我的一个按钮的处理程序.我通过'application'属性获取控制器:

this.application.getController('Controller2').NewRequest(); 

在getController方法的帮助下,我得到控制器的实例,然后调用我的控制器内的任何方法.现在让我们看一下模块控制器的骨架:

Ext.define('CRM.controller.Controller2',{
    extend: 'Ext.app.Controller',    
    refs: [         
        {ref:'cp',selector: 'centerpane'}, // reference to the center pane
        // other references for the controller
    ],
    views: ['c2.CreateForm','c2.EditForm','c2.SearchForm','c2.SearchForm'],
    init: function() {

        this.control({   

            'newform button[action="save"]' : {
                // Do save action for new item
            },  
            'editform button[action="save"]' : {
                // update the record...
            },  
            'c2gridx click' : {
                // oh! an item was click in grid view
             }
        });     
    },
    NewRequest: function() {
        var view = Ext.widget('newform');
        var cp = this.getCp();      // Get hold of the center pane... 
        cp.add(view);   
        cp.setActiveTab(view);
    },
    displayList: function() {
        // Create grid view and display...
    }   
 });

我的模块的控制器只有与该模块相关的动作(模块的网格,表格等).这应该可以帮助您开始正确的方向滚动.