Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. 3 Nov 2010 6:29 AM #1
    kvr
    kvr is offline
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    1
    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...
    Reply With Quote Reply With Quote
  2. 9 Dec 2010 11:33 AM #2
    divestoclimb
    divestoclimb is offline
    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!
    Reply With Quote Reply With Quote
  3. 13 Dec 2012 2:02 AM #3
    santoshballary
    santoshballary is offline
    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
    Reply With Quote Reply With Quote
  4. 13 Dec 2012 2:16 AM #4
    santoshballary
    santoshballary is offline
    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
    Reply With Quote Reply With Quote

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. [2.2][CLOSED] BasicForm.updateRecord updates clears values
    By igo in forum Ext 2.x: Bugs
    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

Tags for this Thread