ExtJS 3.0, XTemplate and fields with square brackets

I’m working a lot with Ruby on Rails and ExtJS 3.0 in this period, and one of the problem I faced was with the management of the standard Rails field names when outputted for a form.

As you may know, Rails generates fields in the form with names like this:

artist[lastname]

…so that when in the controller you call @artist.update_attributes!(params) all the right magic works, since params is a hash in the form:

{ offset => 0, _method => 'put', artist => { 
    firstname => 'James', lastname => 'Hetfield' } 
}

However, ExtJS doesn’t like these kind of parameter names inside Ext.form.Combobox and Ext.DataView, to name two, since they use an XTemplate to render a list of items. The standard regular expression which is used to catch parameters inside a template allows only for digits, letters, ‘-‘ and ‘#’ (plus a little bit of other magic you really don’t want to read).

It turns out that you can override the ‘tpl’ configuration parameter to use XTemplate syntax for inline evaluation. For example, for a Combobox, you could move from the default to:

'<tpl for="."><div>{[values["' + this.displayField + '"]]}</div></tpl>'.

And there you go, problem solved – hopefully.

Cheers,
Matteo