View Full Version : What's the best way to reference child components?

16 Aug 2012, 9:17 AM
Let say I want to create a reusable RenameWindow component that extends Ext.Window. In my initComponent, I create the form and a few textfields. What's the best way to reference those textfields later on in my button save handler? I do not want to assign the 'id' property of each textfield. I also don't like referencing them by their index in the form items collection since another developer can come in and add a new field and now the index is changed.

initComponent: function () {
this.form = new Ext.form.FormPanel({
border: false,
items: [{
fieldLabel: 'Name',
allowBlank: false,
maxLength: 64,
anchor: '100%',
value: this.oldName,
maskRe: /[^<>&\'\"\/\\]/
}, {
fieldLabel: 'Description',
xtype: 'textarea',
maxLength: 450,
anchor: '-1',
hidden: this.hideDescription,
value: this.oldDescription,
maskRe: /[^<>&\'\"\/\\]/

buttons: [{
text: 'Save',
iconCls: 'icon-save',
formBind: true,
handler: this.onOK,
scope: this
}, {
text: 'Cancel',
iconCls: 'icon-cancel',
scope: this,
handler: this.onCancel

Ext.apply(this, {
border: false,
items: form



onOK: function () {
var name = this.form.items.itemAt(0).getValue();
//fire event with new name

16 Aug 2012, 4:44 PM
You can use itemId:


17 Aug 2012, 11:53 AM
For better performance you can also use the "ref" attribute to get a relative and permanent reference to your component's child element:

18 Aug 2012, 7:15 AM
I noticed that this is property was removed from Sencha Architect. Is this still recommended practice? It would be nice to be able to add references to components, the same way you add references to controller references. I realize that this is a sencha architect question as well but mainly I am wondering if using refs is still recommended practice.


18 Aug 2012, 9:56 AM
Ref can be used in Ext3, but is not part of Ext4. SA is for Ext4
Ext Designer is for Ext3/4.0

Are you using Ext3 or Ext4?