Ben 'TabPanel' var

Question

kontrolör ExtJS dinleyenleri tanımla - bu 'Ana' formu (görünüm) bulunuyor. Bu 'tabpanel'de farklı sekmeleri - xtype' panel 'tanımladım. Yani, bir 'ana' (denetleyici), 'ana' görünüm ve bazı sekme görünümlerim var. Sekmenin görünümlerine 'ana' görünümde başvurulur.

Ben 'Ana' denetleyicisi bazı çocuğun panelinin 'etkin' olayın dinleyici tanımlamak istiyorum. Bunu nasıl yapabilirim?

ana 'kontrol:

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() { 

    } 
}); 

ana' görünümü:

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

}); 

alt paneli RequisitesApartment (görünüm):

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

Eh, 'Ana' (denetleyici) bu kodu koymalıyız:

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

sorun yanlış seçicisi oldu, ben kullanılan. Orada

'ApartmentData tabpanel RequisitesApartment' 

'ApartmentData' (a alias: 'widget.ApartmentData' gibi tanımlanmış) - 'pencere' -the ana form xtype olup: doğru seçici olduğunu. TabPanel - '' penceresinde tırnaklarla panel ve 'apartServList' ( alias: 'widget.RequisitesApartment' gibi tanımlanmış) - bir paneli. sra için

teşekkürler!

Answer 2

olarak doğrudan siteye Sorumlu kontrolörde controlİşte bir çalışma sorgu ile bir örnektir. Tabii ki, sadece sorguya ihtiyacınız olacak, ama bence bu iyi bir örnek. Özel cfg özellik kimliği, her sekmeyi bulmayı kolaylaştırır. Aşağıdaki örnekte olduğu gibi, her bir panelde bir tabConfig belirtecek ve orada kimliği tanımlayacaksınız.

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

başka yolu da '#my-name' gibi sorgulanabilir css id kullanmaktır ama ben bir yapılandırma nesnesi geçirmek için yapmanız

Answer 3

doğru şey yukarıdaki örnekte olduğu gibi özel bir yumuşatma Kullanmak tavsiye üye işlev kontrol kontroliçine init işlevi. Sencha belgelerinden: Denetim işlevi, görünüm sınıflarınızdaki olayları dinlemenizi ve işleyici işleviyle biraz harekete geçmenizi kolaylaştırır. düz extjs dokümanlardan

Hızlı bir örnek

: Bu yardımcı olur

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

Umut. Şerefe