PDA

View Full Version : Ext.ux.RadioGroup



vtswingkid
16 Jan 2008, 5:42 AM
Version: 1.0.4

Ok, I decided to build a radio group that can display multiple radios vertically or horizontally. It work great with the form. Simply submit or load and the appropriate checkboxes will be filled in. Just be sure to assign a value. This can also be used for creating radios one at a time in case they need to be located in different places...have fun... there is a test.html file that shows alot of the functionality.

apaa
16 Jan 2008, 6:37 PM
can you give us an example about how you use it and a live Demo about this?
3Q!!!!

vtswingkid
17 Jan 2008, 6:33 AM
It is created just like the current Ext.form.Radio.



items:[{
xtype:'vx-radiogroup',
fieldLabel:'label 1',
checked:true,
name:'group1',
boxLabel: 'box 1',
value: 0
},{
xtype:'vx-radiogroup',
fieldLabel:label 2,
name:'group1',
boxLabel: 'box 2',
value: 1
},{
xtype:'vx-radiogroup',
fieldLabel:label 3,
name:'group1',
boxLabel: 'box 3',
value: 2
}]


The new advantages are this...
1) if you submit a form it will send the "group1":0 or which ever value is checked.
2) if you load the form and there is a data entry {id:"group1", value:1} then label 2 will be checked for you.

Possibly to do:
I am thinking about expanding this so that multiple radios could be defined in one field...


{
xtype: 'vx-radiogroup',
fieldlabel: 'group 1',
name: 'group1',
radios:[{
value:0,
checked:true, //optional
boxLabel:'box 1' //optional
}, {
value:1,
boxLabel:'box 2' //optional
}, {
value:2,
boxLabel:'box 3' //optional
}]
}

this would result in one field
group 1: @ box 1 O box 2 O box 3

I currently just use column or table layout to achieve this but this could be real convenient

mdissel
17 Jan 2008, 6:56 AM
I am thinking about expanding this so that multiple radios could be defined in one field...


Good idea, may i suggest this definition?



{
xtype: 'vx-radiogroup',
fieldlabel: 'group 1',
name: 'group1',
layout: 'vertical' / ' horizontal',
value: 1,
items:[{
value:0,
boxLabel:'box 1' //optional
}, {
value:1,
boxLabel:'box 2' //optional
}, {
value:2,
boxLabel:'box 3' //optional
}]
}


Thanks
Marco

vtswingkid
17 Jan 2008, 9:07 AM
I think I got the multiple radios worked out... see the top of this forum for the code.

mdissel: that feature was added...it defaults to vertical...specify horizontal:true.

I guess I'll try to figure out how to put up a page on the extensions.

liberte
18 Jan 2008, 10:53 AM
I second mdissel's suggestion. Note that he uses 'items' instead of 'radios', which would be more compatible with the xtype constructors, and may have additional benefits.

Other layouts besides vertical and horizontal are also possible, such as a multi-column, or multi-row layout, or within a grid or tree, and it would be nice if the radio group could provide the group behavior without being tied to the layout. Not sure that is doable.

Although the browser provides the radio group behavior of automatically deactivating all other radio buttons with the same name, that's all it does, and it is inconvenient to tie in more behavior, such as enabling/disabling associated panels. I was going to suggest elsewhere that a group of radio buttons would benefit by supporting an activate/deactivate event mechanism, analogous to TabPanel activate/deactivate events.

vtswingkid
21 Jan 2008, 7:06 AM
liberte:
This extension currently allows you to place one or more radios in a single field. They can be set horizontally or vertically. Feel free to enhance the code to allow radios to be layed out in a table (rows x cols).

Items implies that anything can be loaded into a radio group field. This is why I chose radios. I think it is best to keep the radio code simple.

This code handles all radios with the same name in the same form or body if no form is specified. This is the case wether they are built with this object or not. RadioGroup still uses their values.

vtswingkid
25 Jan 2008, 8:02 AM
changed version to 1.0.1
added bodyStyle, style, hideParent, and hidden support
hidden: hides the radio if true

mdissel
25 Jan 2008, 1:44 PM
Nice, a minor detail: in FF 2.0 and IE 7 (didn't test others) the top radiobutton is not perfectly aligned with the left label.. top should be one or two pixels lower..

dotnetCarpenter
25 Jan 2008, 1:51 PM
Cool!
Don't forget to update the extension page: http://extjs.com/learn/Extension:RadioGroup

markfigley
30 Jan 2008, 6:44 AM
Hello,
I want to add a custom function to the Ext.ux.RadioGroup class. So I added some code like



Ext.namespace('Ext.ux');

Ext.ux.RadioGroup = function()
{
Ext.ux.RadioGroup.superclass.constructor.call(this);
//add custom function here
}

Ext.extend(Ext.ux.RadioGroup, Ext.form.Field,
blah blah {

But this fails on IE.

What am I doing wrong?

Regards

mdissel
30 Jan 2008, 6:58 AM
It depends on the error message and the blah blah code.
In this sample you're not extending the ux.RadioGroup, but you're creating a new class or override the existing ux.RadioGroup.

vtswingkid
30 Jan 2008, 7:15 AM
I fixed the alignment 1.0.1

markfigley
30 Jan 2008, 7:27 AM
Hello mdissel,
I think my previous mail was not clear enough.

All I want to do is add a custom function to the existing Ext.ux.RadioGroup class. Can you help me with this?

Regards

vtswingkid
30 Jan 2008, 8:51 AM
Ext.override(Ext.ux.RadioGroup, {
customFunction: function(){}
});

pulen
31 Jan 2008, 11:36 PM
hello vtswingkid

I just try your plugin and it was a good plugin.
but i have some error on firebug.

[Exception... "'Error parsing selector, parsing failed at "]:checked"' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

Line 0i think that because i use array name, like name:'radiobox[group1]',


{
xtype:'ux-radiogroup',
fieldLabel:'group 1',
name:'radiobox[group1]',
horizontal:true,
radios:[{
value:1,
boxLabel:'box 1',
listeners:{
'check':function(r,c){
alert(r.boxLabel+": "+(c?"checked":"unchecked"));
}
}
}, {
value:2,
boxLabel:'box 2',
checked:true
}, {
value:3,
boxLabel:'box 3'
}]
}
i don't know how to solve this. i just want radiogroup return in array variabel for radio name, after submit.

like this with andrie select box (http://extjs.com/forum/showthread.php?t=16841):


comboUnitkerja = new Ext.ux.Andrie.Select(Ext.applyIf({
id: 'unitkerja',
fieldLabel:'Unit Kerja',
multiSelect:true,
minLength:1,
anchor: '95%',
hiddenName: 'kriteria[unitkerja]'
},configComboUnitkerja))
Regard
nb: sorry for my bad english.:)

israel
2 Feb 2008, 4:43 PM
YOU HAVE DEMO?

vtswingkid
3 Feb 2008, 8:19 AM
I don't have a live demo, but there is a test example included with the zip.


pulen: I think the error is referring to the name you chose "radiobox[group1]". Try putting "radiobox" in for the name and see if it works. See if that name will work for any other type of field.

mdissel
4 Feb 2008, 1:21 PM
I'm not sure, but the nested radiobuttons (configured in the array radios) are never destroyed in the onDestroy of the parent.. Correct?
another small extension would be a single change event on the group that contains the old / new value from the grouped radio buttons.

israel
4 Feb 2008, 8:35 PM
:((

mdissel
5 Feb 2008, 12:46 AM
:((

see attached in first post for a demo..

mdissel
7 Feb 2008, 5:05 AM
I'm not sure, but the nested radiobuttons (configured in the array radios) are never destroyed in the onDestroy of the parent.

Here's a fix:

// private
onDestroy : function(){
if (this.radios && this.radios instanceof Array) {
var cnt = this.radios.length;
for(var x=1;x<cnt;x++){
this.els[x].destroy();
}
}
if(this.wrap){
this.wrap.remove();
}
Ext.ux.RadioGroup.superclass.onDestroy.call(this);
},

sinma
7 Feb 2008, 8:59 AM
Thanks for this fantastic extension, vtswingkid!

vtswingkid
11 Feb 2008, 12:15 PM
Release 1.0.2:

mdissel: onDestroy fix added.

wisecounselor
12 Feb 2008, 1:54 PM
I get the following in Firebug:

[Exception... "'Error parsing selector, parsing failed at "]:checked"' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

this happens when I build a group of radio buttons using the radios parameter, and it happens when I set checked to both true and false.

Animal
13 Feb 2008, 12:53 AM
Nice extension. Can I suggest something that I added as an override to the standard Ext Radio control?

You can select the radio control which has the value using a DomQuery selector:



/**
* Checks the radio box with the matching value
* @param {Mixed} v
*/
setValue : function(v){
if(!this.rendered) {
this.value=v;
return;
}
var p=this.el.up('form');//restrict to the form if it is in a form
if(!p)p=Ext.getBody();
var target = p.child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
if (target) target.checked = true;
}

dotnetCarpenter
13 Feb 2008, 4:32 AM
I get the following in Firebug:

[Exception... "'Error parsing selector, parsing failed at "]:checked"' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

this happens when I build a group of radio buttons using the radios parameter, and it happens when I set checked to both true and false.
It's a firefox bug - feel free to submit a bug here: http://www.mozilla.org/support/firefox/bugs (http://www.mozilla.org/support/firefox/bugshttp://)

wisecounselor
13 Feb 2008, 8:53 AM
Yes, firefox craps out when you do your domquery select and the radio field name includes square brackets [] AND the domquery uses the :checked selector syntax , I created a workaround using the click handler to set a hidden field's value, thanks for the extension...

vtswingkid
14 Feb 2008, 7:01 AM
EDIT: I take that back. Your code seems to be triggering the check event also. I just noticed the "true" that was returning the dom element and decided I had better give it a try. Thanks Animal! This has been added to 1.0.3.


Animal: The current setValue function also removes the check from the other radios in the group and fires the check event. Some browsers were not doing this properly if I remember correctly. This is why I do not simply check the single radio box. Am I missing something else?

pludikhu
17 Feb 2008, 1:40 AM
Hi vtswingkid & all

Thanks for a great extension. It's always nice to see someone already wrote something that I myself wouldn't be capable of.

Small problem though. Not sure if it would be related to your code or the Animal addition.
I used your RadioGroup as follows (stripped down to the essentials for testing):


var fld = new Ext.ux.RadioGroup({
name:'group1',
horizontal:true,
radios:[{
value:'t1',
boxLabel:'Yes',
listeners:{
'check':function(r,c){
alert(c);
}
}
}, {
value:'t0',
boxLabel:'No'
}]
});
fld.render(fldnm);
value = 't1';
fld.setValue(value); // Input value

When the input value (using SetValue) is set to the radio with the listener, the listener doesn't fire when the other radio is being selected (such as the above example), neither in FF nor IE.
It does the second time around, so if I'd select No, Yes, No it fires on Yes and the second No.
All's fine if the input value is NOT the one with the listener (and you'd select the radio with the listener first).

Would you (or anyone else) know what the reason is or how I can circumvent this problem?

Thanks in advance!

Patrick

pludikhu
17 Feb 2008, 5:13 AM
OK, so I'm still a noob, so kill me!

I apparently have to add a listener to each radio and do something like:


function(r,c) {
if (c) alert(r.boxLabel+r.value);
}


Sorry to bother you!

P.

vtswingkid
17 Feb 2008, 8:33 AM
I'll try to look into this on Wednessday. I thought I tested the last piece of code, but maybe I failed to refresh the browsers. I guess I should have left the older versions up too. Sorry.

In the meantime, the previous set value did a select on every radio matching that group.
It walked through each one and fired the check event.

mdissel
19 Feb 2008, 3:10 AM
I've modified the code to support:
- global single change event
- support for keyboard, on first letters of the boxlabel

One small problem, the global change event is called twice for radiobuttons except for the first and only if the first button was checked..

tips are welcome!


Ext.override(Ext.form.Field, {
fireKey : function(e) {
if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
this.fireEvent('specialkey', this, e);
}
else {
this.fireEvent(e.type, this, e);
}
}
});

/**
* @author Robert Williams (vtswingkid)
* @version 1.0.3
*/
Ext.namespace('Ext.ux');
Ext.ux.RadioGroup = Ext.extend(Ext.form.Field, {
/**
* @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
*/
focusClass : undefined,
/**
* @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
*/
fieldClass: "x-form-field",
/**
* @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
*/
checked: false,
/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "radio", autocomplete: "off"})
*/
defaultAutoCreate : { tag: "input", type: 'radio', autocomplete: "off"},
/**
* @cfg {String} boxLabel The text that appears beside the checkbox
*/

getId:function(){
//if multiple radios are defined use this information
if(this.radios && this.radios instanceof Array){
if(this.radios.length){
var r=this.radios[0];
this.value=r.value;
this.boxLabel=r.boxLabel;
this.checked=r.checked || false;
this.readOnly=r.readOnly || false;
this.disabled=r.disabled || false;
this.tabIndex=r.tabIndex;
this.cls=r.cls;
//this.listeners=r.listeners;
this.style=r.style;
this.bodyStyle=r.bodyStyle;
this.hideParent=r.hideParent;
this.hidden=r.hidden;
}
}
Ext.ux.RadioGroup.superclass.getId.call(this);
},

// private
initComponent : function(){
Ext.ux.RadioGroup.superclass.initComponent.call(this);
this.addEvents(
/**
* @event change
* Fires when the radio value changes.
* @param {Ext.vx.RadioGroup} this This radio
* @param {Boolean} checked The new checked value
*/
'check'
);
},

// private
onResize : function(){
Ext.ux.RadioGroup.superclass.onResize.apply(this, arguments);
if(!this.boxLabel){
this.el.alignTo(this.wrap, 'c-c');
}
},

// private
initEvents : function(){
Ext.ux.RadioGroup.superclass.initEvents.call(this);
this.el.on("click", this.onClick, this);
this.el.on("change", this.onClick, this);
this.el.on("keyup", this.onKeyUp, this);
},

// private
getResizeEl : function(){
return this.wrap;
},

// private
getPositionEl : function(){
return this.wrap;
},

/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
markInvalid : Ext.emptyFn,
/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
clearInvalid : Ext.emptyFn,

// private
onRender : function(ct, position){
Ext.ux.RadioGroup.superclass.onRender.call(this, ct, position);
this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
if(this.boxLabel){
this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
}
if(!this.isInGroup){
this.wrap.applyStyles({'padding-top':'2px'});
}
if(this.checked){
this.setChecked(true);
}else{
this.checked = this.el.dom.checked;
}
this.parentRadioGroup = this;
if (this.radios && this.radios instanceof Array) {
this.els=new Array();
this.els[0]=this.el;
for(var i=1;i<this.radios.length;i++){
var r=this.radios[i];
this.els[i]=new Ext.ux.RadioGroup({
renderTo:this.wrap,
hideLabel:true,
boxLabel:r.boxLabel,
checked:r.checked || false,
value:r.value,
name:this.name || this.id,
readOnly:r.readOnly || false,
disabled:r.disabled || false,
tabIndex:r.tabIndex,
cls:r.cls,
listeners:r.listeners,
style:r.style,
parentRadioGroup: this,
bodyStyle:r.bodyStyle,
hideParent:r.hideParent,
hidden:r.hidden,
isInGroup:true
});
if (this.horizontal) {
this.els[i].el.up('div.x-form-check-wrap').applyStyles({
'display': 'inline',
'padding-left': '5px'
});
}
}
if(this.hidden)this.hide();
}
},

initValue : function(){
if(this.value !== undefined){
this.el.dom.value=this.value;
}else if(this.el.dom.value.length > 0){
this.value=this.el.dom.value;
}
},

// private
onDestroy : function(){
if (this.radios && this.radios instanceof Array) {
var cnt = this.radios.length;
for(var x=1;x<cnt;x++){
this.els[x].destroy();
}
}
if(this.wrap){
this.wrap.remove();
}
Ext.ux.RadioGroup.superclass.onDestroy.call(this);
},

setChecked:function(v){
if(this.el && this.el.dom){
var fire = false;
if(v != this.checked)fire=true;
this.checked=v;
this.el.dom.checked = this.checked;
this.el.dom.defaultChecked = this.checked;
if(fire)this.fireEvent("check", this, this.checked);

this.parentRadioGroup.fireEvent('change', this.parentRadioGroup, this.getValue(), '');
}
},
/**
* Returns the value of the checked radio.
* @return {Mixed} value
*/
getValue : function(){
if(!this.rendered) {
return this.value;
}
var p=this.el.up('form');//restrict to the form if it is in a form
if(!p)p=Ext.getBody();
var c=p.child('input[name='+this.el.dom.name+']:checked', true);
return (c)?c.value:this.value;
},

// private
onClick : function(){
if(this.el.dom.checked != this.checked){
var p = this.el.up('form');
if (!p)
p = Ext.getBody();
var els = p.select('input[name=' + this.el.dom.name + ']');
els.each(function(el){
if (el.dom.id == this.id) {
this.setChecked(true);
}
else {
var e = Ext.getCmp(el.dom.id);
e.setChecked.apply(e, [false]);
}
}, this);
}
},

// private
onKeyUp : function(e){
var radios = [];
if (this.parentRadioGroup){
radios = this.parentRadioGroup.radios;
} else {
radios = this.radios
}
var c = e.getCharCode(), key = String.fromCharCode(c);
if (!radios || !key)
return;
key = key.toLowerCase();
for(var i=0;i<radios.length;i++){
var r=radios[i];
if (r.boxLabel){
if (r.boxLabel.charAt(0).toLowerCase() == key){
this.setValue(r.value);
return;
}
}
}
},
/**
* Checks the radio box with the matching value
* @param {Mixed} v
*/

setValue : function(v){
if(!this.rendered) {
this.value=v;
return;
}
var p=this.el.up('form');//restrict to the form if it is in a form
if(!p)p=Ext.getBody();
var target = p.child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
if (target) target.checked = true;
this.parentRadioGroup.fireEvent('change', this.parentRadioGroup, this.getValue(), '');
}
});
Ext.reg('ux:radiogroup', Ext.ux.RadioGroup);

pregool
27 Feb 2008, 7:38 PM
Hi..

i try to use your radiogroup in grid.
i put 2 radio item, but when i click the second radiogroup, it gone.
i just can select the first item.
here's my code :



// image url
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';

Ext.onReady(function(){

var radio = new Ext.ux.RadioGroup({
horizontal: true,
boxLabel: 'Label',
radios:[{
value: 0,
boxLabel: 'Pilihan 1'
},{
value: 1,
boxLabel: 'Pilihan 2'
}]
});

var ds = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: "lov.php",
method: 'POST'
}),
baseParams: {task: 'read'},
reader: new Ext.data.JsonReader({
root: 'results'
},[
{name: 'nopeg'},{name: 'nama'},{name: 'radio'}
]),
sortInfo: {field: 'nama'}
});
ds.load();

var cm = new Ext.grid.ColumnModel([{
id:'nopeg',
header: 'NOPEG',
dataIndex: 'nopeg',
width: 80
},{
id:'nama',
header: 'Nama',
dataIndex: 'nama',
width: 200,
editor: new Ext.form.TextField({
allowBlank: true
})
},{
header: 'Radio Group',
dataIndex: 'radio',
width: 200,
height: 50,
editor: radio
}]);

var grd = new Ext.grid.EditorGridPanel({
store: ds,
cm: cm,
width: 500,
height: 300,
clicksToEdit: 1
});

grd.render('grid-example');});


Thanks for ur attention.

hazooma
28 Feb 2008, 7:49 AM
I am sure there must be a better way to achieve this, but I am new to Ext, help please!!

I have two radio buttons and I need to have a listener that fires a data store for a select control. Here is the code I have now, which works fine, but clunky.


In other words, how can I get it to work with one listener rather than two? Thanks!



items: [
{
xtype:'ux-radiogroup',
fieldLabel:'Select a research type',
name:'researchType',
horizontal:true,
radios:[{
value:'D',
boxLabel:'D Research',
listeners:{
'check':function(r,c){
var comboState = Ext.getCmp('comboState');
comboState.enable();

if (c){
baseType = 'D';
}
else
{
baseType = 'E';
};
var comboBase = Ext.getCmp('combo-base');
comboBase.setValue('');
comboBase.store.load({params: {stateCode: comboState.getValue(),baseType: baseType}});
}
}
}, {
value:'E',
boxLabel:'E Research',
listeners:{
'check':function(r,c){
var comboState = Ext.getCmp('comboState');
comboState.enable();

if (c){
baseType = 'E';
}
else
{
baseType = 'D';
};
var comboBase = Ext.getCmp('combo-base');
comboBase.setValue('');
comboBase.store.load({params: {stateCode: comboState.getValue(),baseType: baseType}});
}
}

}]
}]

vtswingkid
28 Feb 2008, 12:37 PM
move your listener function out one level
xtype:....
fieldLabel:...
name:...
listeners:....
radios:...

manishaNC
4 Mar 2008, 2:52 AM
Can radiogroup be like messagebox? Means when messagebox for ex: Prompt is opened with input text/textarea background of it is not accessible. how to bring this effect with radiogroup? Any help will be greatley appreciated. Thanks

vtswingkid
4 Mar 2008, 5:25 AM
Just create a window that is modal and add the radiogroup(s) and any buttons you may need.

manishaNC
5 Mar 2008, 3:04 AM
Thanks a lot for immediate response.
It worked.

eclectus
13 Mar 2008, 3:29 AM
When using the RadioGroup within a FormPanel, if you define a
defaults: {width: 310} for the items in the form, the boxLabels are either missing in IE, or disappear when you resize your browser window. This was testes on IE6 with both the demo code (converted from Window to FormPanel) and my code, both horizontal and vertical radio groups. FF does not show this problem.

If there is a "cure" please let us know.

btw - very useful extension, thank you!

eclectus
13 Mar 2008, 3:34 AM
If you define a width property to the radiogroup the same vanishing act occurs.

as a workaround - is there a way to use "defaults" properties, and then ask the config to "ignore defaults" for a specific item? that would solve this issue without the need to define a width for every single item on the form.

vtswingkid
13 Mar 2008, 4:40 AM
I do not have time to look at this right now. And I can't think a good solution off the top of my head...Dig into the code.

BTW. Ext is planning to roll this code (with changes I am sure) into the 2.1 release. So I don't plan on spending any more time on this.

JorisA
18 Mar 2008, 12:57 PM
Nice extension. Small fix to allow bracket in field names (like somefield[blabla])
replace this.el.dom.name with escape(this.el.dom.name) (3 times in the selectors)

luv2hike
25 Mar 2008, 1:11 PM
Thanks for posting this. It seems to really work nicely!

luv2hike
25 Mar 2008, 2:01 PM
Though I have one small issue. When a new form is being filled out where there are no entries from the database being loaded, I'd like for everything to start blank. The RadioGroup though always seems to start with the first radio checked when no value is given. Is there a way to override this so it can start with none checked unless a record is loaded?

[EDIT] I may have figured out a solution to this, though I'm not sure if it's the "right" way of doing it. It seems almost like a hack to me. I added a hidden radio with a value of '' as the first item in the list of the RadioGroup. So if no record is loaded, it is checked by default which gives the appearance of no radios checked and allows reset to "clear" them out since the originalValue is empty.


...
{
// the panel container is so we can have a border around the radio group
xtype: 'panel',
layout: 'form',
bodyStyle: 'background-color:#bdc0d9; border:thin solid #aabbcc; margin-left:70px; margin-bottom:8px; width:187px',
labelWidth: 48,
items: [
{
xtype: 'ux-radiogroup',
fieldLabel: 'Race',
name: 'Race',
radios: [
{
// the sneaky way to start with no button checked (at least visually to the user)
value: '',
hidden: true
},
{
value: 'W',
boxLabel: 'White'
},
{
value: 'B',
boxLabel: 'Black'
},
{
value: 'H',
boxLabel: 'Hispanic'
},
{
value: 'A',
boxLabel: 'Asian'
},
{
value: 'N',
boxLabel: 'Native American'
},
{
value: 'O',
boxLabel: 'Other'
}
]
}
]
},
...

vcastel
26 Mar 2008, 6:02 AM
Bonjour,

I've got an "esthetic" issue using radiobutton :
by default, the police used for radiobutton text is bigger than everything else (combobox texts, ...) on the form,
why ?

vtswingkid
26 Mar 2008, 5:24 PM
rofl...I must have missed a css definition...use fire bug to see what you need to override.

luv2hike: I am not looking at the code at the moment, but you may be able to specify the selected option as false or null for each one. That might prevent the first one from being checked. Otherwise, I'll try to take a look at it tommorrow, and find a simple solution.

keep in mind that the Ext team is using this to make their own. So I am sure it will be much improved.

vcastel
2 Apr 2008, 11:23 PM
Bonjour,

I've got an "esthetic" issue using radiobutton :
by default, the police used for radiobutton text is bigger than everything else (combobox texts, ...) on the form,
why ?

We found a way to solve that with "ctCls" :

[CODE]
var radioChoix = new Ext.ux.RadioGroup({
fieldLabel : 'lequel',
horizontal : true,
name : 'choix',
ctCls : 'x-form-field',
radios : [{
value : '1',
boxLabel : 'Ici',
listeners : {
'check' : function(r, c) {
fieldTintin.disable();
}
}
}, {
value : '2',
boxLabel : 'l

vcastel
3 Apr 2008, 5:06 AM
I define a radiogroup and sometimes I want to hide it or at least to disable
[CODE]var radioChoix = new Ext.ux.RadioGroup({
fieldLabel : 'lequel',
horizontal : true,
name : 'choix',
ctCls : 'x-form-field',
radios : [{
value : '1',
boxLabel : 'Ici',
listeners : {
'check' : function(r, c) {
fieldTintin.disable();
}
}
}, {
value : '2',
boxLabel : 'l

gravism
15 Apr 2008, 11:13 AM
Nice extension. I was wondering that Ext has no build-in support for such a basic task.

Is there any example on how to use RadioGroup with an existing group of radio items in a HTML form? E.g. like the ComboBox "transform" option.

moizr
16 Apr 2008, 8:22 PM
Hi,

I am looking for exactly the functionality that this extension provides however I am seeing a problem where if I add a field after the radio group field the fields after the radio group are not displayed in the form.

I tried adding a field in test.html with the same result (attached as test.txt)

Rocketman
17 Apr 2008, 2:29 PM
I am having a small problem with this extention. My form has a clear button, and I can't get the radioGroup to clear/unselect. Normally with a radio button, I can just set checked = false. I tried various things but couldn't unselect.

I've looked at radiogroup.js, can't really tell what I need to do to clear the check. Can anybody point me in right direction?

vtswingkid
22 Apr 2008, 5:32 AM
moizr specify and xtype.... xtype: 'textfield'

vtswingkid
22 Apr 2008, 5:34 AM
gravism: ext is working this extension into the ext toolkit. apparently it didn't make 2.1 though :(

vtswingkid
22 Apr 2008, 5:50 AM
Rocketman: I have added a clear method. I will post the new code shortly. Added a clear all to the test.html page to demonstrate it.

vtswingkid
22 Apr 2008, 5:58 AM
JorisA: I added your escape suggestion. Will post shortly.

vtswingkid
22 Apr 2008, 7:33 AM
forums back up ... added hide/show/disable/remove methods...see test.html example....
am posting 1.0.4 now.

snss
26 Apr 2008, 1:22 PM
Hi there

I cant seems to be able to set the radio button back from JSON backend
I can pass back the value, but i cant seems to be able to set it back. getting value from the front end is alright, I just need to know how can I set the radio to be checked.

code below for the radio




var radioCombo = new Ext.ux.RadioGroup({
fieldLabel:'no_radio',
boxLabel: j,
value: j,
name:'radio_btn',
checked: true,
horizontal:true,
applyTo:'radio_btn',
radios:[{
value:i
,boxLabel:'None'
,checked: false
}, {
value:++i,
boxLabel:i,
checked:false
}, {
value:++i,
boxLabel:i,
checked:false
}, {
value:++i,
boxLabel:i,
checked:false
}, {
value:++i,
boxLabel:i,
checked:false
}]
});

vtswingkid
28 Apr 2008, 5:05 AM
I notice that you set the first value to j
and the second to i
and the remaining to i++
is j never == to i ?

spaque99
1 May 2008, 9:39 AM
Sorry if I am missing something obvious here, but I want to set an initial value to the radio group.

If I take the test.html in your zip file and take this example, I see that the default value is set by added checked: true to the second value:


{
xtype:'ux-radiogroup',
fieldLabel:'group 1',
name:'group1',
horizontal:true,
radios:[{
value:1,
boxLabel:'box 1',
listeners:{
'check':function(r,c){
alert(r.boxLabel+": "+(c?"checked":"unchecked"));
}
}
}, {
value:2,
boxLabel:'box 2',
checked:true
}, {
value:3,
boxLabel:'box 3'
}]
}
What I thought is that by adding a value: 2 to just above radio like that (removing checked: true) would set checked to the radio which value matched this one... Am I right here?



{
xtype:'ux-radiogroup',
fieldLabel:'group 1',
name:'group1',
horizontal:true,
value: 2
radios:[{
value:1,
boxLabel:'box 1',
listeners:{
'check':function(r,c){
alert(r.boxLabel+": "+(c?"checked":"unchecked"));
}
}
}, {
value:2,
boxLabel:'box 2',
//checked:true
}, {
value:3,
boxLabel:'box 3'
}]
}


This did not work. Is there a way to do that without setting the checked: true as what I receive from the server before creating the form is the value... I'd like to avoid putting condition on every radio to see if I need to put a checked: true...

Thanks for your help..

Seb

KRavEN
2 May 2008, 7:33 AM
I'm seeing an alignment problem in IE6 when the radiogroup is inside a fieldset. Here's the form config:

{"xtype":"fieldset",
"title":"Test Box",
"collapsible":true,
"autoHeight":true,
"items":[{
"xtype":"ux-radiogroup",
"fieldLabel":"Regions",
"name":"regions",
"radios":[
{"value":1,"boxLabel":"NA"},
{"value":2,"boxLabel":"EMEA"},
{"value":3,"boxLabel": "ASPAC","listeners":[]},
{"value":4,"boxLabel":"LATAM","listeners":[]}
]
}]}

snss
2 May 2008, 6:11 PM
I notice that you set the first value to j
and the second to i
and the remaining to i++
is j never == to i ?

Hi vtswingkid,

j is a counter, similar to i. both start with 0.
first j = first i = 0

I drop the implementation, however I tried to set the values of the normal radio button . during retrieval of data from the backend, I could not be able to set the radio button to the correct value. Any ideas.



<input type="radio" name="radioGroup" id="radio1" value="S" ></input>
<input type="radio" name="radioGroup" id="radio2" value="Y" ></input>


When page load, I am suppose to set the value of radio1 to checked.
But it fails on initial load, only subsequent page load it will be able to set the value correct

Scenerio 1: 1st time load page(F5 button), retrieve from backend, try to set radio button value, but fails - below fails. radio button does not seems to show anything.


Ext.get('radio1').dom.checked = true


Scenerio 2: 2nd time load without pressing the F5, retrieve from backend, can set the radio button value with the same code - below is successful


Ext.get('radio1').dom.checked = true


Please help

snss
2 May 2008, 8:01 PM
hi,

additional note to the above problem:

the above problem occurs if my current tab is not activated. if i am at the current tab, the radio value can be set correctly. can anyone help with this. I tried the using the radio group extension, but the problem seems to be the same.

snss
2 May 2008, 8:44 PM
hi i solved the problems by using deferredRender. if anyone face this problem, hope could help!

david.kuhn
11 May 2008, 5:18 PM
This is an awesome extension, the horizontal layout is exactly what I needed. I've often wondered why this sort of thing wasn't part of the standard Ext form components.

Cheers guys, keep up the great work.

dk

zab
14 May 2008, 4:26 AM
Thanks for this great extension :D

I have a problem with the clear method : all radio of the group are unchecked, but the state checked="" stay in the html.

for example:
I have a radiogroup where each radio have a listener which call an alert('toto') and then call the clear method. If I check a radio, my alert appear without problem and all my radio are unchecked. Then, If I check the same radio, the alert doesn't appear because in html the state checked="" stay in the input of my radio.

jay@moduscreate.com
14 May 2008, 7:36 AM
*** Rant ***

Working with this is utterly frustrating.

getValue does not return the actual checked component, but rather the value of the first radio.

It does not comply with the Ext standard form components, thus is pretty much unusable without major modifications.

I find it interesting that it actually calls itself to create more radio options.
A simple side by side yes/no radio group should yield the following html:


<input type="radio" name="yesno" value="Yes" id='test1'><label for='test1'>Yes</label>
<input type="radio" name="yesno" value="No" id='test2'><label for='test2'>No</label>



instead, this component yields:


<input value="Yes" class="x-form-radio x-form-field" autocomplete="off" id="test" name="primarySubProductRadioQuestion" type="radio">
<label id="ext-gen18" for="test" class="x-form-cb-label">Yes</label>

<div style="display: inline; padding-left: 5px;" id="ext-gen19" class="x-form-check-wrap">
<input checked="checked" value="No" class="x-form-radio x-form-field" autocomplete="off" id="ext-comp-1003" name="primarySubProductRadioQuestion" type="radio">
<label id="ext-gen20" for="ext-comp-1003" class="x-form-cb-label">No</label>
</div>


I hope i don't offend the original developer. :-\

vcastel
19 May 2008, 12:25 AM
I define a radiogroup and sometimes I want to hide it or at least to disable

...

the best I can have it's the first radio disabled but not the others ...

anyone ?
:s
As I'm a newbie in ExtJs (and Js), I haven't found a way to solve that

am I the only one who wants to hide/disable a radiogroup ?

JorisA
26 May 2008, 4:03 PM
I was having problems with radio groups in a tabpanel rendered wrong the first time a tab is shown in internet explorer. (label misaligned)

This resolves it:

// private
onResize : function(){
Ext.ux.RadioGroup.superclass.onResize.apply(this, arguments);
if (Ext.isIE) {
// Allignment fix
this.wrap.repaint();
}
if(!this.boxLabel){
this.el.alignTo(this.wrap, 'c-c');
}
},

gtomalesky
31 May 2008, 5:07 PM
Hi:

I was wondering if radio buttons could be added to the RadioGroup dynamically. Possibly via and Add method. I would be populating this group in reaction to a server response with an unknown number of radio buttons.

Thanks

hqtrung
11 Jun 2008, 3:14 AM
I have made some modification to this ux to provide allowBlank validation, where can I send the modification ?
Greets
Trung Huynh

Cedric Lamalle
12 Jun 2008, 9:50 AM
I have made some modification to this ux to provide allowBlank validation, where can I send the modification ?
Greets
Trung Huynh

If it's not too big, you cold post the diff of your changes as a attachment here in this forum.

hqtrung
17 Jun 2008, 1:30 AM
I have just published it on my blog.
http://trunghuynh.com/2008/06/extjs-radiogroup-extension-with-validation/

JorisA
17 Jun 2008, 5:32 PM
Hm I would like to inform everybody that official radiogroups is currently in svn (and it's awesome). Thnx anyway so far :)

bhomass
2 Jul 2008, 8:59 PM
has any one given it a thought how you would load the name and value of each radio using xhr. there are cases when you can not hard code them in js, and must load them after the pages are loaded.

another words, have a datastore assigned to the radiogroup, which loads the radio value and boxLabels. no need to explicitly set the radio check attribute. which value the radiogroup gets assigned to, it will find the correct radio and set the check.

any chance the formal release can include these features? it would be much more aligned with the other list widgets, such as combo, itemselectors, etc.

bhomass
3 Jul 2008, 5:59 PM
I am adding the dynamic radio list feature on my own.

with xhr I have


Ext.Ajax.request({
url:'loadRadio?fieldId=210',
success: function(response, options){
var result = Ext.util.JSON.decode(response.responseText);
if (result.success){
var group = Ext.getCmp(result.RadioGroup);
var radios = result.Radios; // an array of radio data
group.radios = radios;
group.render();
} else {
Ext.MessageBox.alert('Error', 'Load Action failed '+result.message);
}
},
failure: function(response){
Ext.MessageBox.alert('Error', 'Load Action failed ');
}
});

which returns


{success:true,

RadioGroup:'TestSelector_PassTo_id',

Radios: [{'boxLabel': 'one', value:'1'},

{'boxLabel': 'two', value:'2'},

{'boxLabel': 'three', value:'3'},

]}

the problem is apparently, the radiogroup would not render again, after the initial rendering. how can I get it to set its radios array to the JSON values and force it to render again?

Shogun
23 Jul 2008, 5:19 AM
move your listener function out one level
xtype:....
fieldLabel:...
name:...
listeners:....
radios:...
I'm unable to define ONE event listener for the entire group.
I thought it has to be like this:


xtype:'ux-radiogroup',
fieldLabel:'Reuse',
name:'feReuse',
horizontal:true,
listeners:{
'click':function(){
alert("test");
}
},
radios:[
{
value:1,
boxLabel:'Yes'
}, {
value:0,
boxLabel:'No'
}
]
I tried it with 'onclick', 'change', 'click'. But nothing happens.

With a 'check'-listener at each radio, it works fine:


radios:[
{
value:1,
boxLabel:'Yes',
listeners:{
'check':function(){
alert("test");
}
}
}, {
value:0,
boxLabel:'No'
}
]
By the way, this is a magnificent extension =D>
THX vtswingkid

jay@moduscreate.com
23 Jul 2008, 10:44 AM
Just an FYI, this will go to the waste side once Ext 2.2 comes out :)

Shogun
24 Jul 2008, 3:23 AM
Okay, here I have another problem with this extension.
It could not be that difficult, but apparently I'm that stupid =P~

I load some data to pre-define my form fields. The data looks like that:


{
"success":true,
"list":[
{
"var1":"value1",
"var2":"value3",
"radioVar1":true, // my first radiogroup default value
"radioVar2":false, // my second radiogroup default value
"Right":7
}
]
}
And my Form looks like this:


var form = new Ext.FormPanel({
id: "formPanel",
frame: true,
layout: 'fit',
labelAlign: 'left',
labelWidth: 120,
autoHeight: true,
border: false,
items: {
xtype:'tabpanel',
id: 'formTab',
activeTab: 0,
defaults:{autoHeight:true},
deferredRender: false,
layoutOnTabChange: true,
autoHeight: true,
bodyStyle:'paqdding: 5px;',
border: false,
items:[{
id: 'tab_1',
title:'Tab 1',
bodyStyle:'background-color: #CAD9EC;',
defaults: {width: 300},
defaultType: 'textfield',
layout: 'form',
autoHeight: true,
items: [
{
fieldLabel: 'Variable 1',
name: 'var1',
value: list.var1
},{
fieldLabel: 'Variable 2',
name: 'var2',
value: list.var2
}, {
xtype:'ux-radiogroup',
fieldLabel:'Radio Group 1',
name:'radioVar1',
horizontal:true,
msgTarget: 'qtip',
allowBlank:false,
radios:[
{
value: true,
boxLabel:'Yes'
}, {
value: false,
boxLabel:'No'
}
]
}
]
},{
// ... other tabs with form fields ...
}]
}
});
The values of var1 and var2 (both textfields) are set correctly.
But how can I check the right radio-checkbox by default.

Currently I do it that way, but I think there must be a better one:


// before creating the form panel
var radioGroup1True = list.radioVar1;
var radioGroup2True = list.radioVar2;

// edit in form panel radio group definition
radios:[
{
value: true,
boxLabel:'Yes',
checked: radioGroup1True
}, {
value: false,
boxLabel:'No',
checked: !radioGroup1True
}
]
Thx for your help.

nb
28 Jul 2008, 4:57 AM
hi,

i have radiogroup in a panel(no formpanel).The panel is in a window.
i have found this problem with the first radio button of group.
code


var panel3=new Ext.Panel({height:'auto',items:{xtype: 'radiogroup',name: 'radOptionSelectionTypeId',hideLabel: false,horizontal: false,radios: [{value:1, boxLabel:'Multiple options can be selected', checked: true},{value:2, boxLabel:'Only one options can be selected'},{value:23, boxLabel:'Only one options can be selected 2'}]}});

generated html


<div class="x-panel-body x-panel-body-noheader" id="ext-gen54" style="height: auto;">
<input type="radio" name="radOptionSelectionTypeId" id="ext-comp-1005" autocomplete="off" class="x-form-radio x-form-field" value="1" checked=""/>
<div class="x-form-check-wrap" id="ext-gen61" style="padding-top: 2px;">
<label class="x-form-cb-label" for="ext-comp-1005" id="ext-gen62">Multiple options can be selected</label>
<div class="x-form-check-wrap" id="ext-gen63">
<input type="radio" name="radOptionSelectionTypeId" id="ext-comp-1009" autocomplete="off" class="x-form-radio x-form-field" value="2"/>
<label class="x-form-cb-label" for="ext-comp-1009" id="ext-gen64">Only one options can be selected</label></div>
<div class="x-form-check-wrap" id="ext-gen68">
<input type="radio" name="radOptionSelectionTypeId" id="ext-comp-1010" autocomplete="off" class="x-form-radio x-form-field" value="23"/>
<label class="x-form-cb-label" for="ext-comp-1010" id="ext-gen69">Only one options can be selected 2</label></div></div>
</div>

what is the problem??

joao_candido
6 Aug 2008, 5:35 AM
Hi there.

I

joao_candido
6 Aug 2008, 8:50 AM
Further information about above problem.

It happens only in IE.

divya_jun
5 Sep 2008, 6:04 AM
Hi,
I'm a newbie to ExtJs. I am trying to disable a component based on the value in RadioBox.

This is working when I click. But when the page is loading, by default I'm checking to Y('testRadio' is set to Y at the server side). That time, my check event is not firing. anbody pls help..

{
xtype:
'ux-radiogroup', fieldLabel: 'isTesting ', name: 'testRadio', id: 'test',


radios:[
{ value:

'Y', boxLabel:'Yes' , listeners:{
'check':function(box,checked){
var textCmp = Ext.getCmp('text');
if ( checked ){
textCmp .disable();
textCmp .setValue("");
}else {
textCmp .enable();
}
}} <s:if test='testRadio'=="Y" '>,checked:true</s:if>
},
{ value:'N', boxLabel:'No' <s:if test=''testRadio'!="Y" '>,checked:true</s:if>}
], horizontal:true
}
Thanks,
Divya

Condor
5 Sep 2008, 6:12 AM
Does it really not fire or is it simply that it fires for both Yes and No (and you don't check if it is the Yes that gets checked)?

divya_jun
5 Sep 2008, 6:29 AM
Hi,
When I click on "N" and then "Y" again , the component is getting disabled. But when the page is loaded, box YES is checked , but the component to be diabled is still enable.

Thanks,
Divya

vtswingkid
8 Sep 2008, 4:27 AM
I would start using the radiogroups provided by ext.

riseman
11 Sep 2008, 1:37 AM
how can i get the code? forbiden or?

Condor
11 Sep 2008, 3:20 AM
Internet explorer sometimes fails to download forum attachments. Use another browser (Firefox, Opera, Safari, Chrome).

lacco
11 Sep 2008, 1:20 PM
I'm not sure, but I would like to report a bug in radiogroup.js: When using RadioGroup in a Tab which isn't activated before closing it (onRender is never called), the following js-Error appears:


this.els is undefined (radiogroup.js (Linie 162))
this.els[x].destroy();


I fixed this by editing line 159 (bold chars are added):

if (this.radios && this.radios instanceof Array && this.els) {

fangzhouxing
16 Sep 2008, 12:40 AM
At first, thanks for this great extension.

I use Ext 2.2 now, and the ux.radiogroup display diffrentfly from FF3 and IE7:

IE7: left pic
FF3: right pic

Can anyone help me? Thanks in advance!

lanfeiniao488
17 Sep 2008, 10:43 PM
(:| It's Cool !

sjmittal
8 Nov 2008, 10:19 AM
Hi,
I am using the radigroup.
That has two radio yes/no.
I want only one to be selected ie either yes or no.

Currently I can select both.

Please let me know if I can achieve this using radigroup.

Thanks
Sachin

vtswingkid
10 Nov 2008, 4:27 AM
You can. I have stopped using radiogroup however. I recommend you do the same. Ext now has radio and combo groups. Look at the documentation under forms. Or the examples.

bhomass
3 Jan 2009, 11:03 PM
I am still using this radiogroup, because it does have numerous advantages over the official radiogroup.

I am having one problem though. after I select a radio value, and submit, the right value gets submitted to the server, but when I read out radiogroup.getValue(), it always returns the first radio value.

is there some other method to call to get the current radio value?

bcaufield
9 Apr 2009, 6:52 AM
At first, thanks for this great extension.

I use Ext 2.2 now, and the ux.radiogroup display diffrentfly from FF3 and IE7:

IE7: left pic
FF3: right pic

Can anyone help me? Thanks in advance!

Hi fangzhouxing, I have the same problem; have you found a solution to this problem?

Frank
7 Aug 2009, 1:33 AM
Any updates? Thanks anyway, I'm using it!

geewhizbang
21 Oct 2009, 10:36 AM
The radioGroup in ExtJS 3.x is awful, with a poorly thought out getValue() method that returns a incomprehensible object instead of the currently checked value.

This one works fine in 3.0, thanks. getValue() works like a charm. Just adding my post here so google can find it for other people.

Arcadius
10 Nov 2009, 7:37 AM
The radioGroup in ExtJS 3.x is awful, with a poorly thought out getValue() method that returns a incomprehensible object instead of the currently checked value.

This one works fine in 3.0, thanks. getValue() works like a charm. Just adding my post here so google can find it for other people.

Instead of using getValue() which does return an object, instead use .getValue().getGroupValue() which should work just fine.

gec2csit599b
17 Nov 2009, 4:56 AM
I too am having a problem with IE6. When I resize the browser the radio buttons tend to move closer together and eventually disappear. No problems with FF. Anyone have any ideas on this?

zhengwu119
29 Apr 2010, 11:48 PM
wow.That is really awsome.
Thanks.

zhengwu119
29 Apr 2010, 11:50 PM
Maybe you can fix the source code to solve it.

yangyong1900
17 Jul 2010, 6:19 AM
hi,Hi vtswingkid & all
Thanks for a great extension. It's always nice to see someone already wrote something that I myself wouldn't be capable of.
I have a problem,when I set "horizontal:true",the radios don't horizontal align,one up,one low.the problem can be find the demo,why?

sunjiankirk
21 Aug 2010, 12:35 AM
hi,vtswingkid.
thanks a lot for the extension you provide.
here comes a tough issue I met, I use radiogroup in a form,and binding a listener to check event
on each radio item.
but after I submit the form, I find form.reset() couldn't reset radiogroup actually,
then I call the 'clear' method in the radiogroup, but I find that the listeners are all fired after only
on radio item is checked
my code is here:


var radio_evalState_temp = new Ext.ux.RadioGroup({
name:'disposeType'
// ,id:'win_disposeType'
,horizontal:true
,columns: 2
,hideLabel: true
,radios: [{
value:'v1'
,boxLabel: 'v1'
,listeners:{
'check':function(group,checked){
if(checked){
win.buttons[0].enable();
}
}
}
}
,{
value:'v2'
,boxLabel: 'v2'
,listeners:{
'check':function(group,checked){
if(checked){
win.buttons[0].enable();
}
}
}
}]

});

radustefan
30 Oct 2011, 9:07 AM
I'm using this extension, because original ExtJS RadioGroup renders very slow for many controls on one page.

I had the display problem on IE and I've solved it by commenting in the following lines in
extjs/resources/ext-all.css



/*
.ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{height:21px;}

.ext-ie .x-form-check-wrap input,.ext-ie .x-form-radio-wrap input{width:15px;height:15px;}
*/
....
/*
.x-form-radio{background:url('../images/default/form/radio.gif') no-repeat 0 0;}
*/