Ext4 has replaced the "ref" method of referencing components with a supposedly much more powerful mechanism called Ext.ComponentQuery. While it may be more powerful, I've never been a fan of internal selector engines.

For example, John Resig details the technical side of a Twitter performance issue related to a change in the jquery selector engine. So I argue- why even bother with a selector engine if you don't need it.

The best thing about ref is that involves no querying whatsoever, the references are saved immediately, and can be utilized immediately with no performance penalty. While Ext.ComponentQuery probably has a very negligible performance penalty, it is always a good idea to make your javascript as fast as possible.

Here I introduce the new version of Ext.ux.componentReference.js compatible with ExtJs4. This doesn't seem to be a catch-all because it doesn't work with toolbars as well as the old version did, but I will look into that when the final version of ExtJs4 comes out.

Ext4.ux.componentReference.js

Ext.AbstractComponent.prototype.onAdded = Ext.Function.createSequence(Ext.AbstractComponent.prototype.onAdded, function(){
 
    if(this.refO && this.itemId ){
        this.refO[this.itemId] = this; 
    }else if(this.ownerCt && this.ownerCt.refO ){
 
        if(this.itemId ){
            this.ownerCt.refO[this.itemId] = this; 
        }
        if( !this.refO ){
            this.refO = this.ownerCt.refO; 
        }
    }
});