Использование более одного контроллера с ExtJS 4 MVC - PullRequest
Новая
       17

Использование более одного контроллера с ExtJS 4 MVC

8 голосов
/ 04 октября 2011

Допустим, у меня есть главный контроллер, тогда в моем приложении есть контроллер для каждого «модуля».Этот главный контроллер содержит область просмотра, затем заголовок (с меню) + «центрированный» контейнер, который в начале пуст.

Щелчок в меню изменит текущий модуль / контроллер и adhoc.представление (которое принадлежит этому контроллеру) будет отображаться в центрированном контейнере.

Я думаю, что это очень простой сценарий, но странным образом я не нашел правильного способа сделать это.Есть идеи?Большое спасибо!

Ответы [ 2 ]

9 голосов
/ 04 октября 2011

Вот что я делаю: у меня есть панель инструментов сверху, левая навигация, а в центре находится рабочая область (в основном панель вкладок), как вы упомянули.Давайте рассмотрим каждую часть приложения и объясним. Во-первых, вот как выглядит мой видовой экран: 

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).Эти два компонента составляют мое главное меню или шлюз к другим модулям.Пользователи выбирают пункт меню, и соответствующие виды модулей (такие как форма, сетка, диаграммы и т. Д.) Загружаются в «центральную панель».Центральная панель - это не что иное, как производный класс 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(); 
                     }
             }
        });     
     } 
 });

Посмотрите на один из обработчиков моей кнопки.Я получаю контроллер через свойство application: 

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

Контроллер моего модуля выполняет только действия, связанные с этим модулем (сетка модуля, формы и т. Д.).Это должно помочь вам начать движение в правильном направлении.

1 голос
/ 04 октября 2011

В главном контроллере добавьте дочерний контроллер в обработчик события click меню 

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. 

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:)

...