複数のコントローラをExtJSで使用する4 MVC

Question

私はメインコントローラを持っているとしましょう。私のアプリケーションにはそれぞれの "モジュール"用のコントローラがあります。このメインコントローラーには、ビューポート、ヘッダー（メニューあり）+「中央揃え」コンテナーが含まれていますが、最初は空です。

メニューをクリックすると現在のモジュール/コントローラが変更され、（このコントローラに属する）アドホックビューが中央のコンテナに表示されます。

私はそれが非常に簡単なシナリオだと思うが、妙に私はそれを行うには適切な方法を見つけられませんでした。何か案は？どうもありがとう！

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）を持っていることを見ることができます：ここに私のビューポートがどのように見えるかで、アプリケーションとexplain.First foの各部分を取ることができますApp.view.menu.NavigationPane）。これら2つのコンポーネントは、メインメニューまたは他のモジュールへのゲートウェイを構成します。ユーザーはメニュー項目を選択し、適切なモジュールビュー（フォーム、グリッド、チャートなど）が「センターペイン」にロードされます。中央ペインは、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(); 
        } 
      } 
     });  
    } 
}); 

私のボタンのハンドラを見てください。私は「アプリケーション」プロパティを使用して、コントローラを手に入れる：

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

私のモジュールのコントローラはそのモジュール（モジュールのグリッド、フォームなど）に関連するアクションのみを持っています。今、私のモジュールのコントローラのスケルトンを見てすることができます。これにより、正しい方向へのローリングを開始するのに役立ちます。メインコントローラで

Answer 2

は次のようにイベントを追加コントローラにリスナーを追加発射機能でメニュー

Ext.define('MyAPP.controller.MainController',{ 
... 
    init:function() 
    { 
    this.control({ 
    'menulink': 
    { 
     click:this.populateCenterPanel 
    } 
    }); 
    }, 
    populateCenterPanel:function() 
    { 
    this.getController('ChildController'); 
    } 
}); 

のクリックイベントハンドラで子コントローラを追加 -

Ext.application({ 
... 
    launch:function(){ 
    this.controllers.addListener('add',this.newControllerAdded,this); 
    }, 

    newControllerAdded:function(idx, ctrlr, token){ 
    ctrlr.init(); 
    } 
}); 

は今動的にビューを埋め込むためのコードを入れてChildControllerのinitメソッドのビューポートに追加します。

Ext.define('MyAPP.controller.ChildController',{ 
... 
    refs: [ 
    {ref:'displayPanel',selector:'panel[itemId=EmbedHere]'} 
    ] 
    init:function(){ 
    var panel=this.getDisplayPanel(); 
    panel.removeAll(); 
    panel.add({ 
     xtype:'mycustomview', 
     flex:1, 
     autoHeight:true, 
     ... 
    }); 
    } 
}); 

HTH :)素敵な説明のための