This new config that was introduced in ExtJS 3.0 provides us with a way to create a reference to a component right in the config. It’s so simple its complicated, so I think it’s quickly become time for an example…

Let’s say your extending panel to create a custom component with two buttons in a bottom toolbar, it might look something like this:

Ext.ux.mySweetCmp = Ext.extend(Ext.Panel, {<br /> initComponent: function(){<br /> Ext.applyIf(this, {<br /> html: ‘Bwah bwah’,<br /> bbar: [{<br /> text: 'Boo',<br /> itemId: 'button-boo',<br /> handler: this.myBtnClick,<br /> scope: this<br /> }, {<br /> text: 'Bleh',<br /> itemId: 'button-bleh'<br /> }]<br /> });<br /> Ext.ux.mySweetCmp.superclass.initComponent.call(this);<br /> },<br /> afterRender: function(){<br /> this.btmTb = this.getBottomToolbar();<br /> this.buttonBoo = this.btmTb.getComponent(‘button-boo’);<br /> this.buttonBleh = this.btmTb.getComponent(‘button-bleh’);<br /> Ext.ux.mySweetCmp.superclass.afterRender.call(this);<br /> },<br /> myBtnClick: function(){<br /> this.buttonBoo.setText(‘New Boo’);<br /> this.buttonBleh.setText(‘New Bleh’).disable();<br /> }<br /> });

It’s lines 18, 19 & 20 that make me uneasy. When im inside extending a component, I don’t feel like it should be necessary for me to have to locate a component that is nested within the component im creating and manually assign it to the scope – right?

When we put the new ref config into use, our code will look something like this:

Ext.ux.mySweetCmp = Ext.extend(Ext.Panel, {<br /> initComponent: function(){<br /> Ext.applyIf(this, {<br /> html: ‘Bwah bwah’,<br /> bbar: [{<br /> text: 'Boo',<br /> ref: '../buttonBoo',<br /> handler: this.myBtnClick,<br /> scope: this<br /> },{<br /> text: 'Bleh',<br /> ref: '../buttonBleh'<br /> }]<br /> });<br /> Ext.ux.mySweetCmp.superclass.initComponent.call(this);<br /> },<br /> myBtnClick: function(){<br /> this.buttonBoo.setText(‘New Boo’);<br /> this.buttonBleh.setText(‘New Bleh’).disable();<br /> }<br /> });

The only way to describe this is “clean”. Now lines 18 & 19 are working directly from my local scoped variables, referencing components contained within my component. No messing around with finding the component and manually assigning it to a variable in the scope. Not to mention, with this very short example we were able to save six lines of code, which is a great savings when your only talking about twenty-seven lines of code total – that’s a 20% savings!

The Nitty Gritty

The ref config works much like changing folders on a linux command line, two dots and a slash travel up one level of folder, or in the case of ref, a level of nested component. It takes care of adding the scoped variables for you using the name you provide in the ref config.

Summary

This is one of those things you find often in ExtJS that really set it apart from other RIA libraries – one of the many reasons I use and recommend the ExtJS library for projects over and over again. Simplicity in a highly configurable UI component is not an easy thing to balance, but ExtJS has managed to do it again and again.

NOTE: Something as trivial as adding a toolbar and buttons to a panel is not a reason in itself to create an extended component, this is simply for the purpose of having a minimalistic example – no matter how pointless it might be.