Как определить контроллер представления для Ext JS 6 окна

Question

В ExtJS, как создать вид контроллер для окна, и как сделать окно ребенком панели похожи, как это:

Ext.define('App.view.Main', { 
    items: [ 
     { xtype: 'textfield' }, 
     { xtype: 'window' } 
    ] 
}); 

Причина в том, Я хочу, чтобы один и тот же контроллер представления обрабатывал как действия панели, так и окна. Но Panel, похоже, не принимает окно в качестве своего ребенка.

работа вокруг этого заключается в том, чтобы иметь в контроллере инициализации:

//... 
init: function(view) { 
    this.myWindow = new Ext.window.Window(); 
} 

Но делать это таким образом будет иметь контроллер представления окна указывал на глобальный контроллер приложения, который является нежелательным. Поэтому, чтобы обойти это, я могу добавить в окно кучу слушателей, но это не является предпочтительным.

В любом случае я могу достичь этого без этих уродливых обходных решений?

Answer 1

Привязка одного контроллера к разным точкам является видом против идеи MVC. Но вы можете попробовать просто назначить один, много раз. Вы можете дать контроллеру окно в определении, например: http://examples.sencha.com/extjs/6.0.1/examples/classic/window/window.html

Answer 2

Создание контроллера вида для окна Я предложу что-то здесь. Вы можете создать окно и прикрепить все компоненты, которые привязаны к окну. Пример кода для этого будет выглядеть примерно так.

Ext.define("App.view.NewWin.NewWint", { 
    extend: "Ext.window.Window", 
    alias: 'widget.newWindow', 
    layout: 'fit', 
    scrollable: true, 
    layout: 'fit', 
    modal: true, 
    requires: [ 
     'App.view.NewWin.NewWintController' 
    ], 
    controller: 'newWindowController', 
    initComponent: function() { 
     var me = this, 
     // Code for attributes if in case any required 
     me.tbar = [ 
      // Code for TBar 
     ]; 
     me.items = [{ 
      // Code for WindowItem 
     }]; 
     me.buttons = ['->', { // some code for tbar 
      text: Save, 
      name: "Save", 
      hidden: me.readOnly, 
      disabled: true 
     }, { 
      text: Cancle, 
      name: "cancel" 
     }]; 
     me.callParent(arguments); 
    } 
}) 

Поскольку мы назначили контроллер newWindowController в определении окна, то мы можем использовать контроллер отдельно. Пример кода будет следовать этому

Ext.define('App.view.NewWin.NewWintController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.newWindowController', 

    init: function() { 
     var me = this; 
     me.control({ 
     // You can write the control for your component which is in window. 
     }); 
    }, 


    /* 
    * The code below will work on click of save. 
    */ 
    onSaveBtns: function(btn) { 
     var me = this, 
     // You code for save 
    }, 
    onClose: function(btn) { 
     var window = btn.up("window"); 
     window.close(); 
    } 
}); 

Теперь вторая часть, как сделать окно ребенка полотнища, Afte битовом исследования я нашел>Panel as item вы можете попробовать эту концепцию. Я создал скрипку, где можно поиграть Fiddle.

Примечание В вашем случае вместо создания окна внутри панели вы можете напрямую использовать xtype : 'newWindow'

Answer 3

Но группа, кажется, не принимает окно, как его ребенок.

Окно представляет собой плавающую панель, имеющую окно в виде дочернего элемента панели, не имеет смысла, почему бы вам не использовать панель или контейнер непосредственно? Вы можете открывать окна программно, если хотите. См. Документы для window.

Я бы порекомендовал вам иметь ViewController per View. Если у вас есть общие методы для нескольких контроллеров вы можете иметь суперкласса с теми методами, а затем расширить другие контроллеры от один:

Ext.define('My.SuperController', { 
    init : function() { 
     this.getView().on('event', this.myHandler); 
    } 
}); 
Ext.define('My.PanelController', { 
    extend : 'My.SuperController' 
}); 
Ext.define('My.WindowController', { 
    extend : 'My.SuperController' 
});