ExtJS Radio Buttons and Square Brackets
August 8, 2008 6 Comments
While creating an ExtJS form with several radio buttons today I ran into a bug which caused none of them to work as expected, even though there were no errors/exceptions. To cut a long story short, it was because I was setting the name to “schedule[include_type]” – like this:
{
xtype: 'radio',
name: 'schedule[include_type]',
inputValue: 'page',
boxLabel: 'Show page:'
}
This radio button is one of 4, which allows the user which type of file they want to include on a particular model (a Schedule in this case) – be it Page, Video, Category or one other. The thing is – none of them work with the square brackets in the name. If you remove the brackets, they all work correctly, but the server-side is relying on those brackets to be present to group the data correctly.
In the end I bit the bullet and updated my submit method to add a new parameter directly – here’s a full example:
form = new Ext.form.FormPanel({
items: [
{
xtype: 'radio',
name: 'include_type',
inputValue: 'page',
boxLabel: 'Show page:'
},
{
xtype: 'radio',
name: 'include_type',
inputValue: 'category',
boxLabel: 'Show category:'
},
... plus some extra items
],
buttons: [
{
text: 'Save',
handler: function() {
//find the currently selected include_type from the form
var include_type = this.form.getValues()['include_type'];
//note the params option - this needs to be added manually otherwhise
//schedule[include_type] won't appear
form.form.submit({
waitMsg: 'Saving Data...',
params: "schedule[include_type]=" + include_type,
url: some url...
});
}
}
]
})
Note: I don’t usually add buttons in the way above so I’m not sure if the form.form.submit will work correctly here – see http://extjs.com/deploy/dev/docs/?class=Ext.form.FormPanel for information about overriding submit.
So what we’re doing here is finding which radio button is currently checked, and appending this under “schedule[include_type]” when POSTing the form variables to the server. This really isn’t pleasant but seems to be the best way around this limitation for now.
I regularly use square brackets in other Ext JS Fields – Radio Buttons seem to be the only ones that have this problem. http://extjs.com/forum/showthread.php?p=185296 has a bit of background behind this, but no real solution.
Ed Spencer 
I ran into a similar problem with comboboxes. The issue is XTemplate which has special meanings for square brackets. You can use square brackets in the hidden_name field, but not the value field. I created a Store that uses _ instead of [] and then use square brakets in the hiddenField
Ok that makes sense – I’ve always ended up using hiddenName on combos too, but usually I give the name the square brackets too. It’s odd because every simple field like TextField works without any complaints.
Hi ,
I am facing a strange problem . In a page if I click change buton , edit form comes. I want to set the radio button to some particular option among the options for radio buttons. Can anyone please tell me any method to set it. Also like its utilization.
Thanks, in hope of a sooner reply.
Pingback: extjstutorial.org
How i call click event on radio button click?.. And how i can do in extjs like show and hide div in normal html and javascript?
Using ExtJs 4.0.1:
I’ve just come across a related problem. Say I want to have a form for my “Product” (which has a Name, Price, etc.), then my two text fields would be named “Product[Name]” and “Product[Price]”. I do this because I want to group my product into the “Product” array in order that there is never a chance of conflicts due to other request parameters having the same name. Also, I have CSRF protection, so there is also a hidden input named “Product[Csrf]” that should be grouped.
The form submission works fine. The problem arises when you turn this form into an “edit product” form and you want to populate the form with a record. The populate fails because attributes on the record are named “Name” and “Price”, however, the form fields are named “Product[Name]” and “Product[Price]” – so Ext cannot find the form fields. Then you might say, add an ID to the form fields (because Ext checks the ID in findField(id)), however, I don’t like this solution because you end up with actual DOM elements named “Name” and “Price” which fails if there are two forms on the one page with a “Name” field.
I’m not particularly looking for a solution as I can get around it by reformatting the model before doing loadRecord, but I thought I’d post here because there weren’t many related posts. I did however search in Ext forms for an “is array” functionality like there is in Zend Framework – maybe that would be nice.