在 ExtJS 4 MVC 中使用多个控制器 [英] Using more than one controller with ExtJS 4 MVC

问题描述

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

Let's say I have a main controller, then my application has a controller for each "module". This main controller contains the viewport, then a header (with a menu) + a "centered" container, which is empty at the beginning.

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

A click in the menu will change the current module/controller and the adhoc view (which belongs to this controller) will be displayed in the centered container.

我认为这是一个非常简单的场景，但奇怪的是我没有找到正确的方法来做到这一点.有任何想法吗?非常感谢！

I think it's a very simple scenario, but strangely I didn't find the proper way to do it. Any ideas? Thanks a lot!

推荐答案

这就是我所做的:我在顶部有一个工具栏，一个左侧导航，中心位置是您提到的工作区(基本上是一个选项卡面板).让我们对应用程序的每个部分进行解释.首先，这是我的视口的样子:

Here is what I do: I have a toolbar on top, a left navigation and the center location is work area (basically a tab panel) like you mentioned. Lets take each part fo the application and explain.First, here is how my viewport look like:

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.NavigationPane) 的工具栏 (App.view.menu.Toolbar).这两个组件构成了我的主菜单或通往其他模块的网关.用户选择菜单项，适当的模块视图(如表单、网格、图表等)被加载到中心窗格"中.中央窗格只不过是 Ext.tab.Panel 的派生类.

You can see that I have a toolbar (App.view.menu.Toolbar) with menu and left navigation (App.view.menu.NavigationPane). These two, components make up my main menu or gateway to other modules. Users select the menu item and appropriate module views (like form, grid, charts etc) get loaded into the 'centerpane'. The centerpane is nothing but a derived class of Ext.tab.Panel.

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

Like you said, I have a main controller that handles all the requests from the toolbar and navigation pane. It handled only the toolbar and navigation pane's click actions. Here is my 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(); 
                     }
             }
        });     
     } 
 });

看看我的按钮处理程序之一.我通过应用程序"属性获得控制器:

Look at one of my button's handler. I get hold of the controller through the 'application' property:

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

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

With the help of getController method, I get the instance of the controller and then call any method inside my controller. Now lets have a look at the skeleton of my module's controller:

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

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

My module's controller have only the actions related to that module (a module's grid, forms etc). This should help you get started with rolling in right direction.

这篇关于在 ExtJS 4 MVC 中使用多个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！