make subelements listen to an extJS event

Question

I'am new to extJS and maybe I just don't know the correct strategy, so you can tell me a better solution if you want to.

What I'am trying: I've got an extJS Grid. On a doubleclick, an ExtJS Window container (for detailed settings) should appear which has multiple tabs in it. The window has got a function to set the ID of the clicked element. Every tab in the window needs this ID too. So I want to inform every tab container via an event about the changed ID, when the ID is changed in the window container.

My problem is, that I can't access the window from the tabs to add a listener, because the window is not rendered until it is opened the first time.

Maybe you can understand my problem better if you take a look on my sourcecode:

the Window (setCustomerId() and show() is called, when doubleclicking on a grid element)

Ext.define('myApp.path.view.Edit', {
extend: 'Ext.window.Window',
alias: 'widget.myEdit',

title: 'Edit',
height: 500,
width: 1000,
layout: 'fit',
closeAction: 'hide',

/**
 * Initialize my custom event
 */
initComponent: function() {
    this.addEvents('customerChanged');

    this.callParent();
},

/**
 * Sets the current customerId and fires a customerChanged event
 * @param {Number} customerId
 */
setCustomerId: function(customerId) {
    this.customerId = customerId;
    this.fireEvent('customerChanged', this.customerId);
},

/**
 * create a container for the editor tabs
 */
items: [{
    xtype: 'tabpanel',
    items: [
        {
            xtype: 'myTab'
        }
    ]
}]
})

an example tab

Ext.define('myApp.path.view.myTab', {
extend: 'Ext.container.Container',
alias: 'widget.myTab',

title: 'Customer',
layout: 'fit',

/**
 * Listen to my custom event 
 * PROBLEM: works, but only after the window has been displayed one time
 */
afterRender: function() {
    this.findParentByType('window').addListener("customerChanged",   this.onCustomerChanged)
    this.callParent();
},

/**
 * Listen to my custom event 
 * PROBLEM: doesn't work, findParentByType('window') is undefined
 */
initComponent: function() {
    this.findParentByType('window').addListener("customerChanged",   this.onCustomerChanged)
    this.callParent();
},

onCustomerChanged: functio() {}

})

I hope you can understand my intension. Thank you!

Answer 1

Don't know the code of the grid's itemdblclick event (it will be helpful) but I see that is is something like:

itemdblclick: function(v, m) {
    var id = m.get('id'); 

    //think you are not created a window each time, having the "closeAction: 'hide'" in the code
    //if for simplicity sake, for sure it should not be here
    if (!this.detailsWin) {
        this.detailsWin = Ext.create('myApp.path.view.Edit'); 
    }

    //you set the ID and after it shows the window
    //that is why for the first time event listener is bot working
    this.detailsWin.setCustomerId(id);

    //showing the window
    this.detailsWin.show();    
}

If it is so, you need to call setCustomerId after show:

    this.detailsWin.show(); 
    this.detailsWin.setCustomerId(id);

or simple override the template method inside your window:

/**
 * @template
 */
onShow: function() {
    //firing the event
    //should be checking here if the ID was really changed
    this.fireEvent('customerChanged', this.customerId);

    //call parent to show the window
    this.callParent(arguments);
}

then you can run show setCustomerId in any order.

Or call window's show method with the callback function:

this.detailsWin.show(null, function(){ 
    this.setCustomerId(id);
});

but be sure that the window is modal because is the window is not modal and being shown you will be clicking grid's rows having it opened the callback function will not be working.

The problem.

Btw, you should notice that using such mechanism and having more than one tab in the window. For instance A, B, C, having A as an active tab. The B and C tabs will no listen the customerChanged event(have no customer ID) until they are rendered. So When the window is opened first time, the A tab's onCustomerChanged will be called and the A tab will know about the ID, but the B and C tabs known nothing about it (because they are not rendered yet until you activate/open them and the their onCustomerChanged event listeners were not used). This is the problem of such approach.

Showing the window having all tabs rendered will be working, but it is not best approach to make changes for all rendered tabs at ones, especially having a great amount of components on each tab loading data and etc. User can need for example only one tab of 10 to do something and it is overkill to make changes for all already rendered tabs firing the event.

Plus dbl clicking one the same record in the grid will opens the same window 2 times with the same ID - so it it better to check if the ID was changed before to fire the event.

To solve the above problem, I suggest to use activate event inside the tabs having inside each tab its own customerID property for tracking changes of it and of course a method getting the current ID passed to the window. For such purpose you can use your's base tab class being extended by each tab class using inside the window or using mixin to provide the generic functionality to tabs. Plus processing the active (running the same generic code for a tab) tab on window being shown if you want to save the last active tab (from the previous time window was opened) because activate event wont be fired when the window is opened or just set the active tab every time the window is shown using the tabpanel setActiveTab method, the best place is to override onShow template method. Of course removing the adding events listeners from the tabs.