1. #1
    Sencha User lucasguaru's Avatar
    Join Date
    May 2011
    Location
    Guarujá, Brazil
    Posts
    77
    Answers
    9
    Vote Rating
    2
    lucasguaru is on a distinguished road

      0  

    Default Answered: Multiple RadioGroup with radio with same name

    Answered: Multiple RadioGroup with radio with same name


    I defined a screen which has a radio group and has two items inside with the same name.
    I use it to edit the record and I can open more than one page at the same time.
    When I open one page, the behavior is ok, because I just have the two radios with the same name.
    The problem is when I open another page because I got four radios with the same name.
    I thought the groupRadio would do this to me but I was wrong.
    I saw there´s a RadioManager (singleton) who is responsible to get all the radios on the document, so it doens't see if the searched radio is inside the same radio group.
    Any thoughts?

  2. Interesting problem. Seems to be the same as this one:

    http://www.sencha.com/forum/showthread.php?138657

    Just had a quick stab at a fix. This ties the radio buttons to their form, something akin to how HTML works. You could always tweak it to respect radiogroups if you prefer.

    Code:
    Ext.apply(Ext.form.field.Radio.prototype, {
        onChange: function(newVal, oldVal) {
            var me = this;
            Ext.form.field.Radio.superclass.onChange.apply(this, arguments);
    
            if (newVal) {
                var form = this.up('form');
    
                this.getManager().getByName(me.name).each(function(item){
                    if (item !== me && form === item.up('form')) {
                        item.setValue(false);
                    }
                }, me);
            }
        }
    });
    Let me know if it works for you and I'll post it to the bug ticket.

    Like your test case by the way, very clear.

  3. #2
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462
    Answers
    1
    Vote Rating
    2
    ValterBorges is on a distinguished road

      0  

    Default duplicate components

    duplicate components


    What do you mean you defined a screen.
    The only time this happens to me is if my render Method gets called again after it's already rendered.

    If a window/panel is already rendered rendering it again would duplicate components.

  4. #3
    Sencha User lucasguaru's Avatar
    Join Date
    May 2011
    Location
    Guarujá, Brazil
    Posts
    77
    Answers
    9
    Vote Rating
    2
    lucasguaru is on a distinguished road

      0  

    Post


    It´s something like this:
    Code:
    Ext.define('MyScreen', {
        extend: 'Ext.form.Panel',
        title: 'RadioGroup Example',
        width: 300,
        height: 125,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items:[{
            xtype: 'radiogroup',
            fieldLabel: 'Two Columns',
            // Arrange radio buttons into two columns, distributed vertically
            columns: 2,
            vertical: true,
            items: [
                { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                { boxLabel: 'Item 2', name: 'rb', inputValue: '2' }
            ]
        }]
    });
    
    var screen1 = Ext.create('MyScreen');
    var screen2 = Ext.create('MyScreen');
    In my code, the screen's are tabs to edit records.
    Thanks!

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Interesting problem. Seems to be the same as this one:

    http://www.sencha.com/forum/showthread.php?138657

    Just had a quick stab at a fix. This ties the radio buttons to their form, something akin to how HTML works. You could always tweak it to respect radiogroups if you prefer.

    Code:
    Ext.apply(Ext.form.field.Radio.prototype, {
        onChange: function(newVal, oldVal) {
            var me = this;
            Ext.form.field.Radio.superclass.onChange.apply(this, arguments);
    
            if (newVal) {
                var form = this.up('form');
    
                this.getManager().getByName(me.name).each(function(item){
                    if (item !== me && form === item.up('form')) {
                        item.setValue(false);
                    }
                }, me);
            }
        }
    });
    Let me know if it works for you and I'll post it to the bug ticket.

    Like your test case by the way, very clear.

  6. #5
    Sencha User lucasguaru's Avatar
    Join Date
    May 2011
    Location
    Guarujá, Brazil
    Posts
    77
    Answers
    9
    Vote Rating
    2
    lucasguaru is on a distinguished road

      0  

    Default


    Thanks for you reply Skirtle.

    The problem is the same as you said. I didn't find it before.

    Very good solution and it works very well. What about if we have more than one group at the same form with same name?
    That's not my situation but I can have it sometime.

    Thanks again!

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    If you wanted multiple groups within the same form you'd have to find some other way to identify which radio buttons belong to which group. I used a component query of 'form' but you can change that to something else, e.g. 'radiogroup'.

  8. #7
    Ext JS Premium Member
    Join Date
    Jul 2008
    Location
    New Zealand
    Posts
    91
    Vote Rating
    3
    Greendrake is on a distinguished road

      0  

    Default


    Not f**king fixed in 4.0.7!

    I have updated the fix above so it fixes the setValue method as well:
    Code:
    Ext.form.field.Radio.override({
        onChange: function(newVal, oldVal) {
            var me = this;
            Ext.form.field.Radio.superclass.onChange.apply(this, arguments);
            if (newVal) {
                var form = this.up('form');
                this.getManager().getByName(me.name).each(function(item){
                    if (item !== me && form === item.up('form')) {
                        item.setValue(false);
                    }
                }, me);
            }
        },
        setValue: function(v) {
            var me = this,
                active;
            if (Ext.isBoolean(v)) {
                me.callParent(arguments);
            } else {
                var form = this.up('form');
                me.getManager().getWithValue(me.name, v).each(function(item) {
                    if (form === item.up('form')) {
                        item.setValue(true);
                        return false;
                    }
                }, me);
            }
            return me;
        }
    });

  9. #8
    Sencha User
    Join Date
    Dec 2011
    Location
    Boulder Colorado
    Posts
    6
    Vote Rating
    0
    rdahiya is on a distinguished road

      0  

    Default status of issue?

    status of issue?


    Has this issue been fixed yet or is this patch still the solution? Also, when adding patches like this, where should they be added in the code?

  10. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    It does appear to have been fixed in 4.1.0-beta-1 but 4.0.7 is the last GA release and it wasn't fixed there.

    The best place for the patch depends a little on your circumstances. Usually it's best to put patches immediately after you include the library. If you're dynamically loading the library then you'll probably need to add an explicit Ext.requires for RadioGroup and put the patch in the callback.

    That said, I believe this patch would actually be quite forgiving if you included it much later in the process. So long as it's applied before you create the second RadioGroup I would expect it to work fine.