PDA

View Full Version : Ext.ux.form.RadioGroup - beta (+ preview 0.2.0 version = graphical radio buttons)



tidal
3 Dec 2007, 5:57 PM
Hi!

I created a RadioGroup - Extension.

I ran in some problems in getting Ext.form.Radio (2.O rc1 + 2.0)
to work in the way I wanted it (and I know a lot of people too).
Because I could not find a working solution for a RadioGroup
Form-Element I decided I have to make my on.

While experimenting I discovered, that I also have to write
a new RadioGroup (Radio-Elements) class to make the radio-buttons
play nice with the RadioGroup. (There are some issues which make
Ext.form.Radio not perform in the intended way - i don

tidal
4 Dec 2007, 9:24 AM
Updated Version to beta and added demo.
Please, see above

bhomass
5 Dec 2007, 11:32 AM
does this offer only horizontal layout? or can be config'ed to do vertical layout?

tidal
5 Dec 2007, 12:16 PM
does this offer only horizontal layout? or can be config'ed to do vertical layout?

The radio-items are internally hold in a table-layout, so yes it can be turned to
a vertical view easily. This is planned as a config option for the next version.
Since then you can just rewrite the code a little bit.
Check the onRender method, where the panel with the table-layout is created.
You can change the appearance there.

galdaka
5 Dec 2007, 2:27 PM
Not works in IE6. ;)

MeDavid
7 Dec 2007, 1:04 AM
I also got some errors when using the radiogroup in IE6/7.

The fix is quite simple: in some arrays in Ext.ux.form.RadioGroup.js (or Ext.ux.form.RadioGroup-comp.js of course) the last array element is finished with a comma, while this results in errors in IE. Drop the comma after the last array element and it works like a charm.

Notice that you need to fix this in 3 to 4 lines in the JS include. => the 'patched' version for both js files is attached.

After that the radiogroup works great! :D

tidal
7 Dec 2007, 4:09 AM
the last array element is finished with a comma
Oh, yes, thx! This is my standard bug ;)

I forgot to check with IE after I rewrote the code

tidal
7 Dec 2007, 4:40 AM
@MeDavid
Added your patch to the zip in my first post, to not confuse people.
Thx again!

@all
If you may have time to check:
Ext.ux.form.RadioGroup is inherited from Ext.form.Radio.
This works for the intended tasks of the extension.
What I hadn

flipthefrog
9 Dec 2007, 11:54 AM
Thank you so much

Found a bug though. When you click each radioButton, the on change fires twice, which will lead to problems if the radioButtons are hooked up to ajax calls etc

just try this, the selected value prints twice in fireBug:


radioGroup.on('change', function(){
console.log(radioGroup.getValue());
Ext.getCmp('showvalue').setValue(radioGroup.getValue());
});

tidal
10 Dec 2007, 4:05 AM
Thank you so much

Found a bug though. When you click each radioButton, the on change fires twice, which will lead to problems if the radioButtons are hooked up to ajax calls etc

just try this, the selected value prints twice in fireBug:

Thank you for the info! :)

I am working on a new version which also has icon-buttons instead of
the ugly radio items (It

JeffHowden
10 Dec 2007, 4:21 AM
[QUOTE=tidal;97094]I am working on a new version which also has icon-buttons instead of
the ugly radio items (It

tidal
10 Dec 2007, 6:16 AM
Default browser behavior, per the spec, is the check the first one. So, if you're going to counter the "check the last one" bug, I'd suggest you do it by checking the first one.
Good idea, thank you!

But actually i just forgot to put the fix in the current version.
I just call the clearValue() method, if there is no initial value just
to be sure. And it doesn

apaa
10 Dec 2007, 11:25 PM
In ie7,all the radio is checked by default,but in firefox ,if I didn't check the radio,the last item will be checked,what's wrong with it ???

tidal
11 Dec 2007, 1:49 AM
what's wrong with it ???
It

tidal
12 Dec 2007, 8:41 AM
Hi!
The demo (http://demo.matikom.de/ext/radiogroup/radiotest.php) is updated to a preview of the new version 0.2.0.
It has graphical buttons instead of radio-buttons, the alignment
can be vertical or horizontal, the boxLabel of the radio-items
can be placed on top, bottom, left or right of the item and it
has validation.

[COLOR="Red"]There is still a big bug with IE so don

apaa
13 Dec 2007, 6:09 PM
I like no graphic, can you design it as common,because maybe many of the users didn't want to use it if it has a graphical icon.....
3Q!!!

galdaka
16 Dec 2007, 11:27 AM
Graphics for radiobuttons and checkbixes: http://extjs.com/forum/showthread.php?p=28855#post28855

apaa
21 Dec 2007, 12:37 AM
If I have more than one radiogroup in a page ,when I edit it, I load data from server,the last item will be checked,other will be empty.because I found that all the items value will be added to one group .How should I do to solve it ?
when will you release your final version about this ,I need it . thank you !

nanotron
2 Jan 2008, 4:28 PM
hi,

replace


radioValues: [],
radioItems: {},
radioCount : 0,
checkedItem: null,

with

initComponent: function(){
this.radioValues = [];
this.radioItems = {};
this.radioCount = 0;
this.checkedItem = null;
Ext.ux.form.RadioGroup.superclass.initComponent.call(this);
},

that works for me :)

apaa
2 Jan 2008, 8:22 PM
Thank you very much!

pureurban
17 Mar 2008, 3:18 PM
Demo link doesn't work propably. Please can someone re-upload this one?