À l'aide de plus d'un contrôleur avec ExtJS 4 MVC

Voici ce que je fais: j'ai une barre d'outils en haut, à gauche de la navigation et de l'emplacement du centre est de la zone de travail (en gros un panneau à onglets) comme vous l'avez mentionné. Permet de prendre chaque partie de fo de la demande et de l'expliquer.Tout d'abord, voici comment mon viewport ressembler à:

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

Vous pouvez voir que j'ai une barre d'outils (App.vue.menu.Barre d'outils) avec le menu et de navigation de gauche (App.vue.menu.NavigationPane). Ces deux composantes forment mon menu principal ou une passerelle vers d'autres modules. Les utilisateurs peuvent sélectionner l'élément de menu et le module approprié points de vue (comme la forme de la grille, l', graphiques, etc) sont chargées dans le "centerpane'. Le centerpane n'est rien mais une classe dérivée de la Poste.onglet.Le panneau.

Comme vous l'avez dit, j'ai un contrôleur principal qui gère toutes les demandes dans la barre d'outils et le volet de navigation. Il gère uniquement la barre d'outils et le volet de navigation, cliquez sur actions. Voici mon 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(); 
                     }
             }
        });     
     } 
 });

Regarder une de mes bouton du gestionnaire. - Je trouver le contrôleur par le biais de la 'demande' de la propriété:

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

Avec l'aide de getController méthode, j'obtiens l'instance du contrôleur, puis appeler la méthode, à l'intérieur de mon contrôleur. Maintenant permet d'avoir un regard sur le squelette de mon module de contrôleur:

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

Mon module de contrôleur ont seulement les actions relatives à ce module (module de la grille, des formes etc...). Cela devrait vous aider à obtenir commencé par rouler dans la bonne direction.

OriginalL'auteur Abdel Raoof