Definiowanie słuchaczy w kontrolerze ExtJS

Question

Mam "tabpanel" - to "główna" forma (widok). W tym "tabpanelu" definiuję różne zakładki - xtype "panel". Mam więc jeden widok "główny" (kontroler), "główny" i kilka widoków kart. Widoki kart są przywoływane w widoku głównym.

Chcę zdefiniować odsłuchiwanie zdarzenia "aktywuj" w panelu dziecka w kontrolerze głównym. Jak mogę to zrobić?

Określenie 'główny' Kontroler:

Ext.define('KP.controller.account.apartment.Main', { 
    extend: 'Ext.app.Controller', 

    views: ['account.apartment.Main', 
     'account.apartment.Requisites' 
    ], 

    models: ['account.apartment.Requisites' 
    ], 
    stores: ['account.apartment.Requisites' 
    ], 


    init: function() { 

    } 
}); 

Określenie 'główny' Wyświetl:

Ext.define('KP.view.account.apartment.Main', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.ApartmentData', 

    height: 566, 
    width: 950, 
    activeItem: 0, 
    layout: { 
     type: 'fit' 
    }, 
    autoShow: false, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, {    
      items: [ 
       { 
        xtype: 'tabpanel', 
        activeTab: 0, 
        deferredRender: true, 

        items: [       

         { 
          xtype: 'RequisitesApartment' 
         } 
        ] 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 

}); 

Panel dziecko RequisitesApartment (Wygląd):

Ext.define('KP.view.account.apartment.Requisites', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.RequisitesApartment', 


    id: 'panel_accountrequisites', 
    height: 350, 
    width: 1124, 
    autoScroll: true, 
    layout: { 
     type: 'fit' 
    }, 


    listeners: { 
     activate: function() {   
       ....load data.... 
       ...this listeners I want to push in 'main' controller...    
     } 
    }, 

    initComponent: function() { 
     var me = this; 

     var grid_store = Ext.create('KP.store.account.apartment.Requisites'); 

     Ext.applyIf(me, { 
      dockedItems: [ 
       { 
        xtype: 'gridpanel', 
        height: 260, 
        autoScroll: true, 
        dock: 'bottom', 
        store: grid_store, 
        id: 'r_gridFlatParams', 
        forceFit: true, 


        columns: [ 
         ...some columns.... 
        ], 
        viewConfig: { 
       } 
      } 
      ] 
     }); 

     me.callParent(arguments); 
    } 
}); 

Answer 1

Cóż, należy umieścić ten kod w 'głównym' (Controller):

this.control({ 
     'ApartmentData tabpanel RequisitesApartment': { 
      activate: function() { 
       console.log('hello!');     
      } 
     } 
    }); 

Problem był w złym selektor, że użyłem. Prawidłowe selektor jest:

'ApartmentData tabpanel RequisitesApartment' 

Tam ApartmentData "(określenie jak alias: 'widget.ApartmentData') - stanowi 'okno' xtype -W głównego formularza. tabpanel - panel z zakładkami w 'oknie' i 'apartServList' (zdefiniuj jak alias: 'widget.RequisitesApartment') - niektóre panele.

Dzięki za sra!

Answer 2

zarejestrować się bezpośrednio control w ramach odpowiedzialnego kontrolera

Oto przykład z działającym zapytaniem. Na pewno wystarczy zapytanie, ale uważam, że jest to dobry przykład. Niestandardowy identyfikator właściwości cfg ułatwia znalezienie każdej karty. Tak jak w poniższym przykładzie, będziesz musiał określić tabConfig w każdym panelu i zdefiniować tam identyfikator.

Ext.create('Ext.tab.Panel', { 
    width: 400, 
    height: 400, 
    renderTo: document.body, 
    items: [{ 
     title: 'Foo', 
     tabConfig: { 
      ident: 'foo' 
     }, 
    }, { 
     title: 'Bar', 
     tabConfig: { 
      ident: 'bar', 
      title: 'Custom Title', 
      tooltip: 'A button tooltip' 
     } 
    }] 
}); 

console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]); 
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]); 

Innym sposobem jest użycie css identyfikatorów, które można przeszukiwać jak '#my-name' ale polecam użyć niestandardowego jednej, jak w powyższym przykładzie

Answer 3

poprawną rzeczą do zrobienia jest, aby przekazać obiekt konfiguracyjny do funkcja członka kontrola w kontrolerfunkcja init. Z dokumentacji Sencha: Funkcja kontrolna ułatwia słuchanie zdarzeń na twoich klasach widoków i podejmowanie pewnych działań z funkcją obsługi.

Szybki przykład prosto z ExtJS docs:

Ext.define('MyApp.controller.Users', { 
extend: 'Ext.app.Controller', 

init: function() { 
    this.control({ 
     'viewport > panel': { 
      render: this.onPanelRendered 
     } 
    }); 
}, 

onPanelRendered: function() { 
    console.log('The panel was rendered'); 
} 
}); 

Nadzieja to pomaga. Cheers