PDA

View Full Version : [OPEN-1387] Radiogroup reset clears all values



kvr
3 Nov 2010, 6:29 AM
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:



<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:


// 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;
}
}
});

divestoclimb
9 Dec 2010, 11:33 AM
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:


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!

santoshballary
13 Dec 2012, 2:02 AM
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

santoshballary
13 Dec 2012, 2:16 AM
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