PDA

View Full Version : Combining radio button and text field



tshiran
31 Dec 2009, 2:59 PM
Many forms have something like:
( ) Option 1
( ) Option 2
( ) Other. Specify: [________________]

Here, the user can select "Other" and then enter some textual value in the adjacent field. In some cases, the text box would be directly below the "Other" (i.e., not directly below the radio button, but a bit to the right).

How can I achieve this layout with ext-js?

Thanks,
Tomer

Sheldorn
9 Feb 2010, 9:47 AM
I have made a class for this structure:




RadioField = Ext.extend(Ext.Panel, {
constructor: function(config){

RadioField.superclass.constructor.call(this);
Ext.apply(this, config);

this.radio = new Ext.form.Radio({
name : this.name,
inputValue : this.inputValue,
style : 'margin-top: 4px;margin-right: 5px;'
});

this.field = new Ext.form.TextField({
disabled : true,
allowBlank : false,
name : 'field_' + this.name
});

this.layout = 'column';
this.add([{
layout : 'form',
labelWidth : 1,
items : this.radio
},{
layout : 'form',
html : '<p style="font-size:1.1em; margin-top: 22px;">' + this.label + ': </p>'
},{
labelWidth : 1,
layout : 'form',
labelAlign : 'left',
items : this.field
}]);

this.subscribeEvents();
},
subscribeEvents: function(){
this.radio.on('check', this.toggleState, this);
},
toggleState: function(e,checked){
if (checked){
console.info('checked');
this.field.enable();
}
else{
console.info('disabled');
this.field.disable();
}
}
});

Ext.reg('radiofield', RadioField);



Here an example:





this.houseType = [{
layout:'form',
html: '<b style="font-size:1.1em;">Tipo de residencia:<br></b>'
},{
xtype : 'radio',
boxLabel : 'Piso',
name : 'houseType',
inputValue : 0
},{
xtype : 'radio',
boxLabel : 'Adosado',
name : 'houseType',
inputValue : 1
},{
xtype : 'radio',
boxLabel : 'Casa individual',
name : 'houseType',
inputValue : 2
},{
xtype : 'radiofield',
label : 'Otro',
name : 'houseType',
inputValue : 3
}];




possibly isn't the best solution, but it works.

PD: Sorry for my english :-P

pyrat
15 Feb 2010, 5:07 AM
Have cleaned this up a little to make the panels unstyled and the boxLabel clickable.



// Extjs Extensions
RadioField = Ext.extend(Ext.Panel, {
constructor: function(config){

RadioField.superclass.constructor.call(this);
Ext.apply(this, config);

this.radio = new Ext.form.Radio({
name: this.name,
value: this.value,
boxLabel: this.boxLabel + ': '
});

this.field = new Ext.form.TextField({
disabled: true,
name: 'field_' + this.name
});

this.layout = "column";
this.border = false;

this.add([{
items: this.radio,
unstyled: true,
layout: 'form'
},{
labelWidth: 1,
layout: 'form',
unstyled: true,
items: this.field
}]);

this.subscribeEvents();
},
subscribeEvents: function(){
this.radio.on('check', this.toggleState, this);
},
toggleState: function(e,checked){
if (checked){
this.field.enable();
this.field.focus();
}
else{
this.field.disable();
}
}
});

Ext.reg('radiofield', RadioField);