Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    3
    Vote Rating
    0
    kvr is on a distinguished road

      0  

    Question [OPEN-1387] Radiogroup reset clears all values

    [OPEN-1387] Radiogroup reset clears all values


    Ext version tested:
    • Ext 3.2.1
    Adapter used:
    • ext
    css used:
    • only default ext-all.css
    Browser versions tested against:
    • IE8
    • IE9
    • FF3 (firebug 1.3.0.10 installed)
    Operating System:
    • Linux Ubuntu 10.10 64
    • WinXP Pro
    Description:
    • Resetting a radiogroup causes all radios to be disabled, rather than
      reverting back to the original value. As reset is used by form reset this
      is rather troublesome.
    Test Case:

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Radiogroup reset</title>
    
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
    
            The radiogroup below has default value choice2.<br>
            When we reset the radiogroup, all fields are cleared rather than being reset to the originalValue.<br>
            This is especially troublesome as reset is used by BasicForm.reset.<br><br>
            <div id="content"></div>
    
            <script type="text/javascript">
            Ext.onReady(function(){
    
                new Ext.FormPanel({
                    renderTo: 'content',
                    items: [{
                        "id":"rg", "name":"rg", "xtype":"radiogroup", "value":"Choice 2", "items":[
                            {"inputValue":"Choice 1","boxLabel":"choice1","name":"rg"},
                            {"inputValue":"Choice 2","boxLabel":"choice2","name":"rg"}
                        ]}, {
                            xtype: 'button',
                            text: 'reset',
                            handler: function () { Ext.getCmp("rg").reset() },
                            scope: this
                        }]
                });
    
            }); //end onReady
            </script>
        </head>
        <body>
        </body>
    </html>

    Steps to reproduce the problem:

    • Create a radiogroup
    • set a default value
    • Call reset
    The result that was expected:
    • The radiogroup should select the default value on reset
    The result that occurs instead:
    • All selections are cleared making for a very sily radiogroup
    Debugging already done:
    • It seems the checkboxgroup reset function supports two methods to set the default value:
    • If orginalValue is set, use it
    • but, originalValue is never set (normally this happens in the initValue function, but checkbocgroup has overriden this function and it does not call super and does not set the originalValue.
    • when no originalValue is set, the reset function will ask the individual radiobuttons to reset themselves to their defaultvalue
    • but radiogroup/checkboxgroup set the indivial radio values after the originalValue was stored, so the radios are always empty.
    Possible fix:
    Code:
    // on radiogroup.reset all checkboxes are cleared
    Ext.form.RadioGroup.override({
            initValue : function(){
                    if(this.value){
                            this.originalValue=this.value[0];
                            this.setValue.apply(this, this.buffered ? this.value : [this.value]);
                            delete this.buffered;
                            delete this.value;
                    }
            }
    });
    Last edited by kvr; 9 Nov 2010 at 4:43 AM. Reason: Hoping to get a definite fix...

  2. #2
    Ext User
    Join Date
    Jan 2010
    Posts
    12
    Vote Rating
    0
    divestoclimb is on a distinguished road

      0  

    Default


    I haven't looked at Ext 3.2.1, but I can confirm this problem still exists in 3.3.0. The initValue override above may be necessary to fix radio groups which are initialized at a certain value, I don't know, but it's not a complete fix.

    From my debugging, it looks like Ext.form.CheckboxGroup.reset calls setValue(this.originalValue), and originalValue is the selected radio. This is not a valid argument to Ext.form.RadioGroup.setValue per the API docs, so either RadioGroup needs to override reset or allow setValue to be called with a radio object.

    I think overriding reset is the more "correct" approach, so here's an override that fixes the issue:
    Code:
    Ext.form.RadioGroup.override({
    	reset: function() {
    		if(this.originalValue) {
    			this.setValue(this.originalValue.inputValue);
    		} else {
    			this.eachItem(function(c){
    				if(c.reset){
    					c.reset();
    				}
    			});
    		}
    
    		(function() {
    			this.clearInvalid();
    		}).defer(50, this); 
    	}
    });
    By the way resetting radio groups was also broken in 3.0.0, I don't think I ever confirmed it got truly fixed in any later release. This is a longstanding issue that really needs to get fixed!

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    13
    Vote Rating
    0
    santoshballary is on a distinguished road

      0  

    Default Radiogroup reset clears all values

    Radiogroup reset clears all values


    Hi ,

    I am using extjs 4 and using rowEditor inside a row there is an radio groups , on add button am setting default value to the radio groups as 'null', it will come fine while saving ill select one value, after that once again if i click on add row , the radio group is taking previous value here is the code.


    grid = Ext.create('Ext.grid.Panel', {
    renderTo: Ext.Element.get('testDiv'),
    plugins: [rowEditing],
    store: userStore,
    width: 960,
    height:250,
    frame: true,
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    title: 'Meeting Clients',
    columns: [{
    text: 'ID',
    width: 40,
    sortable: true,
    dataIndex: 'id',
    hidden:true
    },{
    text: 'First Name',
    flex: 1,
    sortable: true,
    //renderer: renderTopic,
    dataIndex: 'firstName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    }, {
    text: 'Last Name',
    flex: 1,
    sortable: true,
    dataIndex: 'lastName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    },

    {
    text: 'Company Name',
    flex: 1,
    sortable: true,
    dataIndex: 'companyName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    },
    {
    text: 'Country',
    flex: 1,
    sortable: true,
    dataIndex: 'country',
    field: {
    xtype: 'textfield',
    allowBlank: false
    },
    renderer: function (value, meta, record) {
    var max = 42;
    meta.tdAttr = 'data-qtip="' + value + '"';
    return value.length < max ? value : value.substring(0, max - 3) + '...';
    }
    },
    {
    //xtype: 'radiogroup',

    flex: 1,
    sortable: true,
    //tooltip: 'C Name Some name test',
    text: "<span ' title='#{meetingManager.antiBriberyPlolicy()}'>Gov\'t Official ? <img src=\"#{request.contextPath}/images/help2.jpg \" height=\"18\" width=\"18\"/></span>",
    //xtype: 'fieldcontainer',
    id: 'govtOff',
    defaultType: 'radiofield',
    renderer: renderStatus,
    dataIndex: 'govtOfficial',
    field: {
    xtype: 'radiogroup',
    allowBlank: false,
    cls: 'x-check-group-alt',
    items: [
    {boxLabel: 'Yes', name: 'govtOfficial', inputValue: true, checked:false},
    {boxLabel: 'No', name: 'govtOfficial', inputValue: false, checked:false}
    ],
    setValue: function (value) {
    if (!Ext.isObject(value)) {
    var obj = new Object();
    obj[this.name] = value;
    value = obj;
    }
    Ext.form.RadioGroup.prototype.setValue.call(this, value);
    }


    }

    },{
    xtype: 'actioncolumn',
    width:60,
    sortable: false,
    items: [{
    icon:'#{request.contextPath}/images/trash-btn-2011.png',
    tooltip: 'Delete Meeting Clients',
    dataIndex: 'id',
    handler: function(grid, rowIndex, colIndex) {
    Ext.MessageBox.confirm('', "Would you like to delete this Client?", function (btn) {
    if (btn == 'yes')
    userStore.removeAt(rowIndex);
    });
    }
    }]
    }
    ]
    ,
    dockedItems: [{
    xtype: 'pagingtoolbar',
    store: userStore,
    layout: 'hbox', // same store GridPanel is using
    dock:'bottom',
    align:'center',
    hideRefresh: true,
    displayInfo: true,
    listeners: {
    'afterrender': function (component)
    {
    component.down('#refresh').hide()
    },single: true
    },
    displayMsg: 'Clients {0} - {1} of {2}',
    prependButtons: true,
    items: [
    {
    xtype: 'label',
    width:300
    }
    ],
    otherItems: [
    {
    xtype: 'combo',
    itemId: 'combotop',
    id:'combotop',
    autoSelect:true,
    readOnly:false,
    allowblank:false,
    width:50,
    disabled: true,
    queryMode: 'local',
    store: new Ext.data.ArrayStore({
    id: 0,
    fields: [
    'myId', // numeric value is the key
    'displayText'
    ],
    data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
    }),
    listeners: {
    'afterrender': function(combo) {
    var recordSelected = combo.getStore().getAt(0);
    combo.setValue(recordSelected.get('myId'));
    },
    'select': function (combo, records, eOpts)
    {
    Ext.getCmp('combobottom').setValue(combo.getValue());
    grid.store.pageSize = combo.getValue();
    userStore.loadPage(1);
    }
    },
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
    }
    ],
    emptyMsg: "No Clients to display"
    },
    {
    xtype: 'pagingtoolbar',
    store: userStore, // same store GridPanel is using
    dock: 'top',
    align:'center',
    hideRefresh: true,
    displayInfo: true,
    listeners: {
    'afterrender': function (component)
    {
    component.down('#refresh').hide()
    },single: true
    },
    displayMsg: 'Clients {0} - {1} of {2}',
    prependButtons: true,
    items: [
    {
    xtype: 'label',
    width:300
    }
    ],
    otherItems: [
    {
    xtype: 'combo',
    itemId: 'combobottom',
    id:'combobottom',
    autoSelect:true,
    readOnly:false,
    allowblank:false,
    width:50,
    disabled: true,
    queryMode: 'local',
    store: new Ext.data.ArrayStore({
    id: 0,
    fields: [
    'myId', // numeric value is the key
    'displayText'
    ],
    data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
    }),
    listeners: {
    'afterrender': function(combo) {
    var recordSelected = combo.getStore().getAt(0);
    combo.setValue(recordSelected.get('myId'));
    },
    'select': function (combo, records, eOpts)
    {
    Ext.getCmp('combotop').setValue(combo.getValue());
    grid.store.pageSize = combo.getValue();
    userStore.loadPage(1);
    }
    },
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
    }
    ],
    emptyMsg: "No Clients to display"
    },{
    xtype: 'toolbar',
    dock: 'top',
    align:'center',
    items: [{
    text: 'Add Client',
    iconCls: 'icon-add2',
    minWidth : 100,
    pressed: true,
    handler: function(){
    // empty record
    // edit = this.editing;
    //edit.cancelEdit();


    rowEditing.cancelEdit();

    var r = Ext.ModelManager.create({


    firstName: '',
    lastName:'',
    companyName:'',
    country:'',
    govtOfficial:null



    }, 'MeetingClients');


    Ext.getCmp("govtOff").reset;

    userStore.insert(0, r);
    rowEditing.startEdit(0, 0);




    }
    },{
    iconCls: 'icon-trash3',
    pressed: true,
    handler: function(){

    selections = grid.getSelectionModel().getSelection();
    var delArray='';
    if(selections.length === 0){
    alert('Atleast select one record to delete');
    }
    else if (selections) {
    Ext.MessageBox.confirm('', 'Would you like to delete '+ selections.length +' Clients?', function(btn) {
    if (btn == 'yes'){

    //selected=grid.getSelectionModel().getSelection();

    Ext.each(selections, function (item) {

    //delArray.push(item.data.meetingClientId);
    delArray = delArray +','+item.data.meetingClientId;
    });

    deleteSelected(delArray);
    }
    });
    }

    }
    }] //items end
    },

    ] //docked items end
    })//Grid End

    thanks in advance for your help

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    13
    Vote Rating
    0
    santoshballary is on a distinguished road

      0  

    Default Radiogroup reset not clearing all values

    Radiogroup reset not clearing all values


    Radiogroup reset clears all values

    Hi ,

    I am using extjs 4 and using rowEditor inside a row there is an radio groups , on add button am setting default value to the radio groups as 'null', it will come fine while saving ill select one value, after that once again if i click on add row , the radio group is taking previous value here is the code.

    Code:
    grid =	Ext.create('Ext.grid.Panel', {
    renderTo: Ext.Element.get('testDiv'),
    plugins: [rowEditing],
    store: userStore,
    width: 960,
    height:250,
    frame: true,
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    title: 'Meeting Clients',
    columns: [{
    text: 'ID',
    width: 40,
    sortable: true,
    dataIndex: 'id',
    hidden:true 
    },{
    text: 'First Name',
    flex: 1,
    sortable: true,
    //renderer: renderTopic,
    dataIndex: 'firstName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    } 
    }, {
    text: 'Last Name',
    flex: 1,
    sortable: true,
    dataIndex: 'lastName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    }, 
    
    {
    text: 'Company Name',
    flex: 1,
    sortable: true,
    dataIndex: 'companyName',
    field: {
    xtype: 'textfield',
    allowBlank: false
    }
    },
    {
    text: 'Country',
    flex: 1,
    sortable: true,
    dataIndex: 'country',
    field: {
    xtype: 'textfield',
    allowBlank: false
    },
    renderer: function (value, meta, record) {
    var max = 42;
    meta.tdAttr = 'data-qtip="' + value + '"';
    return value.length < max ? value : value.substring(0, max - 3) + '...';
    }
    },
    {
    //xtype: 'radiogroup',
    
    flex: 1,
    sortable: true,
    //tooltip: 'C Name Some name test',
    text: "<span ' title='#{meetingManager.antiBriberyPlolicy()}'>Gov\'t Official ? <img src=\"#{request.contextPath}/images/help2.jpg \" height=\"18\" width=\"18\"/></span>", 
    //xtype: 'fieldcontainer',
    id: 'govtOff',
    defaultType: 'radiofield',
    renderer: renderStatus,
    dataIndex: 'govtOfficial',
    field: {
    xtype: 'radiogroup',
    allowBlank: false,
    cls: 'x-check-group-alt',
    items: [
    {boxLabel: 'Yes', name: 'govtOfficial', inputValue: true, checked:false},
    {boxLabel: 'No', name: 'govtOfficial', inputValue: false, checked:false}
    ],
    setValue: function (value) {
    if (!Ext.isObject(value)) {
    var obj = new Object();
    obj[this.name] = value;
    value = obj;
    }
    Ext.form.RadioGroup.prototype.setValue.call(this, value);
    } 
    
    }
    
    },{
    xtype: 'actioncolumn',
    width:60,
    sortable: false,
    items: [{
    icon:'#{request.contextPath}/images/trash-btn-2011.png',
    tooltip: 'Delete Meeting Clients',
    dataIndex: 'id',
    handler: function(grid, rowIndex, colIndex) {
    Ext.MessageBox.confirm('', "Would you like to delete this Client?", function (btn) { 
    if (btn == 'yes')
    userStore.removeAt(rowIndex); 
    });
    }
    }]
    }
    ]
    ,
    dockedItems: [{
    xtype: 'pagingtoolbar',
    store: userStore,
    layout: 'hbox', // same store GridPanel is using
    dock:'bottom',
    align:'center',
    hideRefresh: true,
    displayInfo: true,
    listeners: {
    'afterrender': function (component)
    {
    component.down('#refresh').hide()
    },single: true
    },
    displayMsg: 'Clients {0} - {1} of {2}',
    prependButtons: true,
    items: [
    {
    xtype: 'label',
    width:300
    }
    ],
    otherItems: [
    {
    xtype: 'combo',
    itemId: 'combotop',
    id:'combotop',
    autoSelect:true,
    readOnly:false,
    allowblank:false, 
    width:50,
    disabled: true,
    queryMode: 'local',
    store: new Ext.data.ArrayStore({
    id: 0,
    fields: [
    'myId', // numeric value is the key
    'displayText'
    ],
    data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
    }),
    listeners: {
    'afterrender': function(combo) {
    var recordSelected = combo.getStore().getAt(0); 
    combo.setValue(recordSelected.get('myId'));
    },
    'select': function (combo, records, eOpts)
    {
    Ext.getCmp('combobottom').setValue(combo.getValue());
    grid.store.pageSize = combo.getValue();
    userStore.loadPage(1);
    }
    },
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
    }
    ],
    emptyMsg: "No Clients to display"
    },
    {
    xtype: 'pagingtoolbar',
    store: userStore, // same store GridPanel is using
    dock: 'top',
    align:'center',
    hideRefresh: true,
    displayInfo: true,
    listeners: {
    'afterrender': function (component)
    {
    component.down('#refresh').hide()
    },single: true
    },
    displayMsg: 'Clients {0} - {1} of {2}',
    prependButtons: true,
    items: [
    {
    xtype: 'label',
    width:300
    }
    ],
    otherItems: [
    {
    xtype: 'combo',
    itemId: 'combobottom',
    id:'combobottom',
    autoSelect:true,
    readOnly:false,
    allowblank:false, 
    width:50,
    disabled: true,
    queryMode: 'local',
    store: new Ext.data.ArrayStore({
    id: 0,
    fields: [
    'myId', // numeric value is the key
    'displayText'
    ],
    data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
    }),
    listeners: {
    'afterrender': function(combo) {
    var recordSelected = combo.getStore().getAt(0); 
    combo.setValue(recordSelected.get('myId'));
    },
    'select': function (combo, records, eOpts)
    {
    Ext.getCmp('combotop').setValue(combo.getValue());
    grid.store.pageSize = combo.getValue();
    userStore.loadPage(1);
    }
    },
    valueField: 'myId',
    displayField: 'displayText',
    triggerAction: 'all'
    }
    ],
    emptyMsg: "No Clients to display"
    },{
    xtype: 'toolbar',
    dock: 'top',
    align:'center',
    items: [{
    text: 'Add Client',
    iconCls: 'icon-add2',
    minWidth : 100,
    pressed: true,
    handler: function(){
    // empty record
    // edit = this.editing;
    //edit.cancelEdit();
    
    
    rowEditing.cancelEdit();
    
    var r = Ext.ModelManager.create({
    
    
    firstName: '',
    lastName:'',
    companyName:'',
    country:'',
    govtOfficial:null
    
    
    
    }, 'MeetingClients');
    
    
    Ext.getCmp("govtOff").reset;
    
    userStore.insert(0, r);
    rowEditing.startEdit(0, 0);
    
    
    
    
    }
    },{
    iconCls: 'icon-trash3',
    pressed: true,
    handler: function(){
    
    selections = grid.getSelectionModel().getSelection();
    var delArray=''; 
    if(selections.length === 0){
    alert('Atleast select one record to delete');
    } 
    else if (selections) {
    Ext.MessageBox.confirm('', 'Would you like to delete '+ selections.length +' Clients?', function(btn) {
    if (btn == 'yes'){
    
    //selected=grid.getSelectionModel().getSelection();
    
    Ext.each(selections, function (item) {
    
    //delArray.push(item.data.meetingClientId); 
    delArray = delArray +','+item.data.meetingClientId;
    });
    
    deleteSelected(delArray);
    }
    });
    }
    
    }
    }] //items end
    },
    
    ] //docked items end
    })//Grid End
    thanks in advance for your help

Similar Threads

  1. BasicForm.reset: Resets to default values?
    By darthwes in forum Ext 3.x: Help & Discussion
    Replies: 19
    Last Post: 1 Nov 2010, 11:29 AM
  2. Replies: 2
    Last Post: 3 Oct 2008, 5:48 AM
  3. Reset button to clear form values?
    By onmission in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 17 Nov 2007, 11:34 AM

Thread Participants: 2

Tags for this Thread