PDA

View Full Version : textfield in a radiogroup



dbeatle123
27 May 2010, 10:48 AM
Hi all,

I have a textfield inside a radiogroup and it is causing me some issues when I call form.setValues. Basically the field ends up with 'false' in it. This makes sense given what saveValueForItem does but it isn't what I'd like.

Here is the code and an override of setValueForItem that makes this work for me.


new Ext.form.RadioGroup({
name: 'gene_prod_filter_type',
hiddenName: 'gene_prod_filter_type',
fieldLabel: 'Gene product filter type (how many cluster members need to match the filter?)',
vertical: false,
items: [{
name: 'gene_prod_filter_type',
boxLabel: 'One member',
checked: true,
inputValue: 'one'
},
{
xtype: 'panel',
border: false,
defaults: {
border: false
},
items: [{
xtype: 'radio',
name: 'gene_prod_filter_type',
boxLabel: 'A Percentage of members',
inputValue: 'perc'
},
{
xtype: 'textfield',
maskRe: /[0-9.]/,
name: 'gene_prod_filter_perc',
hiddenName: 'gene_prod_filter_perc',
width: '20'
}
}]
}]
});

// override
Ext.override(Ext.form.RadioGroup, {
setValueForItem: function(val){
val = String(val).split(',')[0];
this.eachItem(function(item){
if(item.getXType() == 'radio') {
item.setValue(val == item.inputValue);
}
});
}
});


Is the behavior of setValueForItem a bug or is putting non-radio elements inside a RadioGroup bad form? I'm open to changing it up to be good form but I couldn't seem to get the textfield to stick with the radio button as well as I could doing it this way.

Appreciate the help!

dbeatle123
27 May 2010, 12:30 PM
OK, so this does not entirely work. The textfield that is defined within the RadioGroup does not end up in the form's items list. For instance, a call to form.getValues() returns the textfield but a call to form.getFieldValues() does not.

I'll keep looking into a workaround for this but any suggestions would be great.

Thanks.

dbeatle123
27 May 2010, 1:29 PM
OK I think I have a workaround. Basically to do this you have to create the textfields outside of the form, place them in the items list for the RadioGroup (that takes of the rendering) and then add them to the form with form.add(). Here is what it looks like:



var gene_prod_filter_perc_textfield = new Ext.form.TextField({
name: 'gene_prod_filter_perc',
id: 'gene_prod_filter_perc',
hiddenName: 'gene_prod_filter_perc',
width: '20'
});
var rg = new Ext.form.RadioGroup({
name: 'gene_prod_filter_type',
hiddenName: 'gene_prod_filter_type',
fieldLabel: 'Gene product filter type (how many cluster members need to match the filter?)',
vertical: false,
items: [{
name: 'gene_prod_filter_type',
boxLabel: 'One member',
checked: true,
inputValue: 'one'
},
{
xtype: 'panel',
border: false,
defaults: {
border: false
},
items: [{
xtype: 'radio',
name: 'gene_prod_filter_type',
boxLabel: 'A Percentage of members',
inputValue: 'perc'
},
gene_prod_filter_perc_textfield]
}]
});

// Having created the form somewhere and placed the rg in it...

cluster_form.form.add(gene_prod_filter_perc_textfield);