PDA

View Full Version : Obtaining a reference to a field



m@uce
27 Jan 2011, 10:38 AM
I'm trying to obtain a reference to the searchfield created in a toolbar, to get the current field value based on a time interval. Having a hard time finding the proper method to get a reference to the dynamically created field in the documentation.


var lkpBar = new Ext.Toolbar({
style: {
fontSize: 'small',
},
ui: 'dark',
dock: 'top',
items: [{
xtype: 'searchfield',
placeHolder: 'Search',
name: 'searchfield'
}]
});

VinylFox
27 Jan 2011, 11:08 AM
Many ways to do this, but one of the easy ways is to use an itemId and getComponent. For example:


var lkpBar = new Ext.Toolbar({
style: {
fontSize: 'small',
},
ui: 'dark',
dock: 'top',
items: [{
xtype: 'searchfield',
placeHolder: 'Search',
name: 'searchfield',
itemId: 'searchfield'
}]
});

var searchFld = lkpBar.getComponent('searchfield');

m@uce
27 Jan 2011, 4:13 PM
Thanks! That worked great. Would you mind clueing me in to one or two of the alternate methods? Coming from jQuery, I'm used to working with DOM elements by element ID. As much as possible, I try to compartmentalize/nest references to objects, which leaves me looking things up quite a bit. Is there a white paper or something on ExtJS/Sencha Touch's preferred architecture for object references? The layout of the kitchen sink demo app does it one way, but I'm looking for something resembling a standard.

AndreaCammarata
27 Jan 2011, 4:44 PM
Hi m@uce.
The method suggested by VinylFox is without doubt the preferred one.
However, there's something you have to know:
Every component you create (panels, toolbars, etc) are registered with Ext.ComponentMgr, so you can even access to all these components any time with



Ext.getCmp('component_id');


To make you an example, looking at the VinylFox example, you can write the same code in this way



var lkpBar = new Ext.Toolbar({
style: {
fontSize: 'small',
},
ui: 'dark',
dock: 'top',
items: [{
xtype: 'searchfield',
id: 'searchfield',
placeHolder: 'Search',
name: 'searchfield'
}]
});

var searchFld = Ext.getCmp('searchfield');

This method will even allow you to get components that are not in the scope of your functions.
Hovever, good Sencha developers should not use this method, because this goes against good OOP development, but no one forbids you to use it.
You even have to take care that Sencha already set an unique auto id to all the components, but if you decide to set your own id on some components, you have to look out that all the id are really unique inside all your application.
You can see "Ext.getCmp()" method as the standard document.getElementById, but only for Sencha Components.
If you want to get a dom node, you have to use Ext.get() or Ext.fly().

Hope this helps.

VinylFox
28 Jan 2011, 10:19 AM
Like Andrea said, you can give things ID's as well, but this is not the preferred method, since you can then only ever have one of them.

An alternate method to the itemId that I suggested would be using ref's, however this feature is being phased out in 4.x, so don't get too use to it.

mitchellsimoens
28 Jan 2011, 12:26 PM
... however this feature is being phased out in 4.x, so don't get too use to it.

Confused? :-) going from 1.0.2 to 4.x already? Just teasin ya

VinylFox
28 Jan 2011, 1:07 PM
Oh right, this is a Sencha Touch forum. Never mind the 4.x comment, my brain is fried on Ext JS 3.x today.