通过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.

更改当前模块/控制器和adhoc视图（属于此控制器）将显示在中心容器中。

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.Toolbar）导航（App.view.menu.NavigationPane）。这两个组件组成我的主菜单或其他模块的网关。用户选择菜单项和适当的模块视图（如窗体，网格，图表等）加载到'centerpane'。中心窗格只是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(); 
                     }
             }
        });     
     } 
 });

看看我的按钮的处理程序。我通过'application'属性持有控制器：

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屋！