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

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.