View Full Version : How to Grok the Syntax

11 May 2011, 10:47 AM
I needed to figure out how to get the value of a field on my form from within a handler function but I didn't know how to reference the field and kept getting errors. I spent time looking at the API, code examples and Googled around for examples. I found one example which works (I imagine there are others). Assuming a form named MyForm and a field 'myField'...
var myVal = myForm.getForm().findField("myField").getValue(); I don't think the answer would be obvious to me from looking at the API docs - but maybe I'm just too new or don't know how to follow the API trail - so to speak. I imagine that with experience one develops a body of knowledge and an expanding code base of one's own to refer to.

So my question is, when the issue is one of syntax - what's your approach?


11 May 2011, 11:05 AM
The ref config option is a clean, object-oriented style of referencing child components. As a terse example:

var win = new Ext.Window({
height: 100,
width: 300,
items: [{
xtype: 'form',
ref: 'userForm',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
ref: 'firstName'
xtype: 'textfield',
fieldLabel: 'Last Name',
ref: 'lastName'

This would allow you to reference objects like so:

var firstName = win.userForm.firstName.getValue();You can even move objects 'up' in the hierarchy by way of 'relative pathing' style syntax, where if your firstName textfield was defined like so:

xtype: 'textfield',
fieldLabel: 'First Name',
ref: '../firstName'
You could then say:

var firstName = win.firstName.getValue();Note that you can move an object up several levels in a hierarchy by prepending more ../ characters, e.g. ref: '../../../someName' would make the someName reference available three levels up.

11 May 2011, 1:58 PM
That's a very cool feature, friend. I will definitely use it.

Thanks for taking the time to provide a code example and an explanation.