PDA

View Full Version : Ext.form.RadioGroup and Ext.form.Radio objects with brackets it their names



elDub
27 Jul 2009, 6:45 AM
I know this topic has appeared in other threads before, but it seems as if the Ext 3.0 code MIGHT be on the way to addressing this... I think.

For Rails and other frameworks which use brackets in the names of the fields, getting the value set in the UI and getting the value sent back to the server has been tricky with Ext. I noticed that with Ext 3.0, radio buttons with brackets in their names still throws a javascript error the first time they are clicked in the UI, however if the radio button has the { checked: true } configuration option set, it does not throw an error.

Another rough point is activating the correct radio button when a form is loaded from record data. It seems that if the radio buttons are all enclosed within a radiogroup and the radiogroup as well as all the radio buttons all share the same name, BasicForm#loadRecord calls ARE setting the values properly. The thing is, there is no documentation for the name configuration on Ext.form.RadioGroup. Is this unsanctioned and apt to be broken?



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<script src="/ext3.0/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
<script src="/ext3.0/ext-all-debug.js" type="text/javascript"></script>

<link href="/ext3.0/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />

<style>
.issue-panel { margin: 5px; }
</style>

<script type="text/javascript">
//<![CDATA[
Ext.BLANK_IMAGE_URL = '/ext3.0/resources/images/default/s.gif';

var User = Ext.data.Record.create([
{ name: 'user[name]' },
{ name: 'user[gender]' }
]);

var joe = new User({
'user[name]': 'Joe',
'user[gender]': 'male'
});

var sue = new User({
'user[name]': 'Sue',
'user[gender]': 'female'
});

var buttons = [
{
text: 'load Joe',
handler: function(){
this.ownerCt.ownerCt.getForm().loadRecord(joe);
}
},{
text: 'load Sue',
handler: function(){
this.ownerCt.ownerCt.getForm().loadRecord(sue);
}
},{
text: 'show querystring',
handler: function(){
alert(this.ownerCt.ownerCt.getForm().getValues(true));
}
}
];

Ext.onReady(function(){
new Ext.Panel({
title: 'Ext.form.RadioGroup and Ext.form.Radio objects with brackets it their names',
autoHeight: true,
width: 300,
frame: true,
cls: 'issue-panel',
defaults: {
style: 'padding: 10px 0;'
},
items: [
{
xtype: 'form',
buttons: buttons,
items: [
{
style: 'padding-bottom: 10px',
html: 'Using radiogroup with a name attribute (not listed as a valid configuration option) that matches the name on all the enclosed radio objects will BasicForm#loadRecord properly, however if any of the radio buttons are chosen before it is explicitly set to checked via javascript it will raise an error.'
},{
xtype: 'textfield',
name: 'user[name]',
fieldLabel: 'user[name]'
},{
xtype: 'radiogroup',
name: 'user[gender]',
fieldLabel: 'user[gender]',
items: [
{
xtype: 'radio',
name: 'user[gender]',
boxLabel: 'Female',
inputValue: 'female'
},{
xtype: 'radio',
name: 'user[gender]',
boxLabel: 'Male',
inputValue: 'male'
}
]
}
]
},{
xtype: 'form',
buttons: buttons,
items: [
{
style: 'padding-bottom: 10px',
html: 'Using radiogroup with a name attribute that matches the name on all the enclosed \'primed\' (checked: true) radio objects seems to work. One side-effect is that the last radio will always be one chosen by default, even on an empty form.'
},{
xtype: 'textfield',
name: 'user[name]',
fieldLabel: 'user[name]'
},{
xtype: 'radiogroup',
name: 'user[gender]',
fieldLabel: 'user[gender]',
items: [
{
xtype: 'radio',
name: 'user[gender]',
boxLabel: 'Female',
inputValue: 'female',
checked: true
},{
xtype: 'radio',
name: 'user[gender]',
boxLabel: 'Male',
inputValue: 'male',
checked: true
}
]
}
]
}
]
});
});
//]]></script>
</head>
<body>
</body>
</html>

Condor
27 Jul 2009, 7:12 AM
See this thread (http://extjs.com/forum/showthread.php?p=210602#post210602).

elDub
27 Jul 2009, 7:23 AM
Condor,

Adding the proposed 2.x changes in the linked thread to the 3.x code does not stop the javascript errors regarding brackets in the name. (I just pasted that code into the sample and clicked on one of the radio buttons in the first form within FireFox 3.0.12.) In my example code, the second form panel actually works (without the linked patch code) with the only drawback that the last radio button gets selected. I was also concerned that my usage of the name: configuration option for the radiogroup was not sanctioned and therefore could break in future changes.

-Lonnie

Condor
27 Jul 2009, 7:33 AM
That override was for Ext 2.x. For Ext 3.0 you need a different override.

I've added the Ext 3.0 override in the linked thread (http://extjs.com/forum/showthread.php?p=210602#post210602).

elDub
27 Jul 2009, 7:50 AM
Great! That updated for 3.0 override did in fact stop the javascript error from occurring. Thanks. :D

What about the usage of Ext.form.RadioGroup with a 'name' configuration that matches that of the enclosed Ext.form.Radio objects? Is that the sanctioned/proper usage even though there is no reference to a 'name' configuration option in the documentation?

Condor
27 Jul 2009, 9:35 AM
A radiogroup doesn't have a name config option, so I don't understand the question...

elDub
27 Jul 2009, 11:19 AM
Well that's the thing. If you examine the sample code, I have included a name: 'user[gender]' assignment on the RadioGroup. With that line there, when the BasicForm does a loadRecord, the correct Radio object gets selected for the data. (Click the 'load Sue' and 'load Joe' buttons.) With that line REMOVED, the Radio objects to NOT get set. So, I am asking if I have stumbled across some missing documentation, or am I treading on unsupported functionality? The desired ability to load Radio objects from Record data has been something posted in the forums for a while now and I wanted to know if this was the answer.



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<script src="/ext3.0/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
<script src="/ext3.0/ext-all-debug.js" type="text/javascript"></script>

<link href="/ext3.0/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />

<style>
.issue-panel { margin: 5px; }
</style>

<script type="text/javascript">
//<![CDATA[
Ext.BLANK_IMAGE_URL = '/ext3.0/resources/images/default/s.gif';

var User = Ext.data.Record.create([
{ name: 'user[name]' },
{ name: 'user[gender]' }
]);

var joe = new User({
'user[name]': 'Joe',
'user[gender]': 'male'
});

var sue = new User({
'user[name]': 'Sue',
'user[gender]': 'female'
});

var buttons = [
{
text: 'load Joe',
handler: function(){
this.ownerCt.ownerCt.getForm().loadRecord(joe);
}
},{
text: 'load Sue',
handler: function(){
this.ownerCt.ownerCt.getForm().loadRecord(sue);
}
},{
text: 'show querystring',
handler: function(){
alert(this.ownerCt.ownerCt.getForm().getValues(true));
}
}
];

Ext.onReady(function(){
new Ext.Panel({
title: 'Ext.form.RadioGroup and Ext.form.Radio objects with brackets it their names',
autoHeight: true,
width: 300,
frame: true,
cls: 'issue-panel',
defaults: {
style: 'padding: 10px 0;'
},
items: [
{
xtype: 'form',
buttons: buttons,
items: [
{
style: 'padding-bottom: 10px',
html: 'Using radiogroup with a name attribute (not listed as a valid configuration option) that matches the name on all the enclosed radio objects will BasicForm#loadRecord properly.'
},{
xtype: 'textfield',
name: 'user[name]',
fieldLabel: 'user[name]'
},{
xtype: 'radiogroup',
name: 'user[gender]', // <== HERE
fieldLabel: 'user[gender]',
items: [
{
xtype: 'radio',
name: 'user[gender]',
boxLabel: 'Female',
inputValue: 'female'
},{
xtype: 'radio',
name: 'user[gender]',
boxLabel: 'Male',
inputValue: 'male'
}
]
}
]
}
]
});
});
//]]></script>
</head>
<body>
</body>
</html>