This post originated from an RSS feed registered with Ruby Buzz
by Edward Spencer.
Original Post: ExtJS Radio Buttons and Square Brackets
Feed Title: Ed's Elite blog
Feed URL: http://feeds2.feedburner.com/EdSpencer
Feed Description: Ruby on Rails development, Git issues and ExtJS/JavaScript
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:
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... }); } } ] })
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.
Previous Topic
