Ext.ux.RadioGroup

[vtswingkid]

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]

can you give us an example about how you use it and a live Demo about this?
3Q!!!!

[vtswingkid]

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]

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]

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]

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]

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]

changed version to 1.0.1
added bodyStyle, style, hideParent, and hidden support
hidden: hides the radio if true

[mdissel]

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]

Cool!
Don't forget to update the extension page: http://extjs.com/learn/Extension:RadioGroup