Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-10876 in 4.2.2.1144.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    94
    Vote Rating
    4
    mdl@online.no is on a distinguished road

      0  

    Default 4.2.1: How to clear radiobutton values and submitting empty values?

    4.2.1: How to clear radiobutton values and submitting empty values?


    I have a form in my application which consists of multiple radiogroups with two or more radiobuttons within each group. What I really need is combination of a radiobutton and checkbox because only one button should be selectable within each group, but I also want the user to be able to "unselect" all buttons within the group.

    I ended up with a solution where the user has the option to "reset" the group, and I do this be using .setValue(false) for the buttons within the group. The problem is that when i get the updated record from the form, it still has the initial values. If I save the model before setting any radiobuttons, NULL is submitted as it's value. If I first check the box and the uncheck it, the submitvalues will still be submitted even if the box is unchecked.

    Any solution to my problem?

    *EDIT BY SLEMMON
    Issue: If you load a form with a record, select a radiofield in a radiogroup, updateRecord() on the form, and save() the record the radiofield is sent. If you then reset() the basicForm, updateRecord, and save() again, the value for the radiogroup is sent again - not reset to '' by the reset / updateRecord() action.

    Steps:
    Using the inline example below:
    Select a radiofield
    Click Submit
    Notice in the Network tab that the inputValue for the checked field is submitted.
    Click Reset
    Click Submit
    Again, the inputValue for the radiogroup is sent instead of ''.

    Test case:
    Code:
    Ext.define('MyRecord', {
        extend: 'Ext.data.Record',
        fields: ['rb'],
        proxy: {
            type: 'ajax',
            url: 'data/json.json'
        }
    });
    
    
    var myRecord = Ext.create('MyRecord', {});
    
    
    var formPanel = Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
    
        // The form will submit an AJAX request to this URL when submitted
        url: 'save-form.php',
    
    
        // Fields will be arranged vertically, stretched to full width
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
    
        // The fields
        defaultType: 'textfield',
        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' },
                { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
                { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
            ]
        }],
    
    
        // Reset and Submit buttons
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }, {
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true,
            handler: function() {
                var formPanel = this.up('form'),
                    form = formPanel.getForm();
                    
                formPanel.updateRecord();
                
                formPanel.getRecord().save();
            }
        }],
        renderTo: Ext.getBody()
    });
    
    
    formPanel.loadRecord(myRecord);
    Last edited by slemmon; 8 Aug 2013 at 2:52 PM. Reason: added notes and inline test case

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    94
    Vote Rating
    4
    mdl@online.no is on a distinguished road

      0  

    Default


    UPDATE

    I circumvented the problem by manually updating the value of the record as well. However, I would still like to know if this is a bug or not.

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,369
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    To get a better idea of what you're doing can you share your code? Or a test case that exemplifies the steps the code is taking when setting / updating / getting the form data from the loaded record?

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    94
    Vote Rating
    4
    mdl@online.no is on a distinguished road

      0  

    Default


    My code for uncheckable radiobutton. I know the timed setValue is a bit ugly, but it works, except the form record doesn't get updated when the button is unchecked and the last checked radiobutton's inputValue is still submitted.

    Code:
    Ext.define('CRM.view.RadioCheckbox', {   
        extend: 'Ext.form.field.Radio',
        alias: 'widget.radiocheckbox',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                listeners: {
                    afterrender: {
                        fn: me.onRadiofieldAfterRender,
                        scope: me
                    }
                }
            });
    
    
            me.callParent(arguments);
        },
    
    
        onRadiofieldAfterRender: function(component, eOpts) {
            component.inputEl.on("mouseup", function(event, target, eOpts) {
                if(component.getValue()) {
                    setTimeout(function() { component.setValue(false); }, 100);
                }
            });
        }
    
    
    });
    By adding this code to the timed function it works, but I doesn't make any sense to me.
    Code:
    component.up("form").getForm().getRecord().set(component.getName(), null);

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,369
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Instead of using setValue on each form field what about instead using updateRecord() just before submitting the form / syncing the record?

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    94
    Vote Rating
    4
    mdl@online.no is on a distinguished road

      0  

    Default


    It might be my poor english, but I don't know if I understand how that will solve my problem? The setValue is used for "unselecting" the radiobutton if the user doesn't want any of the radiobuttons within the group selected when the record is synced. However, even if the button is unselected with setValue, the inputValue-property is still submited when the record is synced.

    I'll try to explain better. Let's say my radiogroup has two radiobuttons. The first one has a inputValue of 1, the other one has a inputValue of 2. None of the radiobuttons are initially checked.

    If I load an empty record into the form with loadRecord(), then call updateRecord() of the form and save() of the record, null is submitted as the radiobutton value.

    If I check the first radiobutton and sync the model, the value 1 is submitted as one would expect.

    If I then uncheck the radiobutton with setValue(false) so that none of radiobuttons in the group are checked, then form.updateRecord() and record.save(), it still submits the value 1 and not null as I'm expecting it to do.

  7. #7
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,369
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thanks for the report! This is a bug that I've added to our bug tracker.

    Below is what I did for a workaround for the time being:

    Code:
    Ext.define('MyRecord', {
        extend: 'Ext.data.Record',
        fields: ['rb'],
        proxy: {
            type: 'ajax',
            url: 'data/json.json'
        }
    });
    
    
    var myRecord = Ext.create('MyRecord', {});
    
    
    var formPanel = Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
    
        // The form will submit an AJAX request to this URL when submitted
        url: 'save-form.php',
    
    
        // Fields will be arranged vertically, stretched to full width
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
    
        // The fields
        defaultType: 'textfield',
        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' },
                { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
                { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
                { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
            ]
        }],
    
    
        // Reset and Submit buttons
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }, {
            text: 'Reset rb',
            handler: function() {
                this.up('form').getForm().reset();   
                this.up('form').getRecord().set('rb', '');
            }
        }, {
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true,
            handler: function() {
                var formPanel = this.up('form'),
                    form = formPanel.getForm();
                    
                formPanel.updateRecord();
                
                formPanel.getRecord().save();
            }
        }],
        renderTo: Ext.getBody()
    });
    
    
    formPanel.loadRecord(myRecord);

Thread Participants: 1