无法调用未定义的on方法

Question

I was wondering if someone could tell me why the below code is not working. The first 2 on functions are working and then the last on function is not working and I am getting the error message "cannot call method of on of undefined."

It seems to not like this line, textF.getEl().on('click', function() {

    bUpdateSwitch.on({'click': function (){
        var textF = Ext.getCmp('rateSummary');
        textF.enable();
        textF.getEl().on('click', function() {
            Ext.getCmp('rtCurrency').enable();
            Ext.getCmp('rtCurrency').setReadOnly(false); 
            Ext.getCmp('rtAccEffDate').enable(); 
            Ext.getCmp('rtAccEffDate').setReadOnly(false); 
            Ext.getCmp('rtAccExDate').enable(); 
            Ext.getCmp('rtAccExDate').setReadOnly(false); 
            Ext.getCmp('rtJctR260').enable(); 
            Ext.getCmp('rtJctR260').setReadOnly(false); 
            Ext.getCmp('switchRate').enable(); 
            Ext.getCmp('switchRate').setReadOnly(false);       
        });
    }})

Answer 1

That means that your rateSummary component is not rendered at the time this function is executed. Hence getEl() returns undefined and calling a method on undefined crashes with the error message you've reported...

What is this component exactly? Can you not register the listener on the component directly, instead of its element? Like this:

textF.on('click', function() {
    // ...
});

Otherwise, do it like this, and Ext will take care of waiting for the rendering:

textF.on({
    el: {
        // ...
    }
});