ExtJS: Unable to call findById on a toolbar added by apply()

Question

I have a page with a toolbar on it, that is added through apply like so (abridged code, lots of irrelevant stuff in the original):

var obj = Ext.extend(Ext.Panel,{
    initComponent:function(){
        Ext.apply(this,{
            layout:'card',
            itemId:'contactDetails',
            border:false,
            activeItem:0,
            tbar: new Ext.Toolbar({
                items:[{text:'New'},{text:'Edit',id:'editButton'}]
            })
        });
        obj.superclass.initComponent.apply(this);

     }, load:function() {
         this.tbar.findById('editButton').toggle(false); //Javascript error here about findById not being a function.
     }
   });

The above may not be syntactically correct either. It is in my code (at least to the extent that no javascript errors aside from the big one are thrown.)

Answer 1

First off, you don't have to override initComponent just to provide default configs. This will work the same way and is simpler:

var obj = Ext.extend(Ext.Panel,{
    layout:'card',
    itemId:'contactDetails',
    border:false,
    activeItem:0,
    tbar: new Ext.Toolbar({
        items:[{text:'New'},{text:'Edit',id:'editButton'}]
    })
});

(Scratch my previous answer, I misread your code.)

This might also solve your problem -- since you are overriding initComponent in your code, you must call the superclass initComponent within your method or else things will not work. When overriding initComponent your code you should be doing this:

initComponent: function(){
    Ext.apply(this,{
        layout:'card',
        itemId:'contactDetails',
        border:false,
        activeItem:0,
        tbar: new Ext.Toolbar({
            items:[{text:'New'},{text:'Edit',id:'editButton'}]
        })
    });
    obj.superclass.initComponent.apply(this, arguments);
}

Also, are you actually overriding the existing Panel.load() method for some reason? Or are you trying to add some different functionality and chose an existing method name by mistake?

EDIT: Should have noticed this earlier, but the tbar config is not available after render as a valid property. From the docs for tbar: "To access the top toolbar after render, use getTopToolbar"