PDA

View Full Version : [FIXED-533] form.reset() doesn't restore the Checkboxgroup last loaded value



udalaitz
5 Feb 2010, 2:14 PM
Ext version tested:


Ext 3.1.1-rc5977-137


Adapter used:


ext


css used:


only default ext-all.css


Browser versions tested against:


FF3.5.7


Operating System:


Windows 7
WinXP Pro


Description:


I set "trackResetOnLoad:true" for the form. If I set the value of the checkboxes group using the setValues() function from the form, when the form.reset() function is called, the checkbox group is cleared. It doesn't keep its last loaded values, it goes back to its original values.


Test Case:
The Checkbox/Radio group example, with some modifications.


/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';


/*====================================================================
* Individual checkbox/radio examples
*====================================================================*/

// Using checkbox/radio groups will generally be easier and more flexible than
// using individual checkbox and radio controls, but this shows that you can
// certainly do so if you only need a single control, or if you want to control
// exactly where each check/radio goes within your layout.
var individual = [{
bodyStyle: 'padding-right:5px;',
items: {
xtype: 'fieldset',
title: 'Individual Checkboxes',
autoHeight: true,
defaultType: 'checkbox', // each item will be a checkbox
items: [{
xtype: 'textfield',
name: 'txt-test1',
fieldLabel: 'Alignment Test'
}, {
fieldLabel: 'Favorite Animals',
boxLabel: 'Dog',
name: 'fav-animal-dog'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Cat',
name: 'fav-animal-cat'
}, {
checked: true,
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Monkey',
name: 'fav-animal-monkey'
}]
}
}, {
bodyStyle: 'padding-left:5px;',
items: {
xtype: 'fieldset',
title: 'Individual Radios',
autoHeight: true,
defaultType: 'radio', // each item will be a radio button
items: [{
xtype: 'textfield',
name: 'txt-test2',
fieldLabel: 'Alignment Test'
}, {
checked: true,
fieldLabel: 'Favorite Color',
boxLabel: 'Red',
name: 'fav-color',
inputValue: 'red'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Blue',
name: 'fav-color',
inputValue: 'blue'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Green',
name: 'fav-color',
inputValue: 'green'
}]
}
}];

/*====================================================================
* CheckGroup example
*====================================================================*/
var checkGroup = {
xtype: 'fieldset',
title: 'Checkbox Groups (initially collapsed)',
autoHeight: true,
layout: 'form',
collapsed: false, // initially collapse the group
collapsible: true,
items: [{
xtype: 'textfield',
name: 'txt-test3',
fieldLabel: 'Alignment Test',
anchor: '95%'
},{
// Use the default, automatic layout to distribute the controls evenly
// across a single row
xtype: 'checkboxgroup',
fieldLabel: 'Auto Layout',
id: 'autoLayout_checkgroup_id',
items: [
{boxLabel: 'Item 1', name: 'cb-auto-1'},
{boxLabel: 'Item 2', name: 'cb-auto-2'},
{boxLabel: 'Item 3', name: 'cb-auto-3'},
{boxLabel: 'Item 4', name: 'cb-auto-4'},
{boxLabel: 'Item 5', name: 'cb-auto-5'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
// Put all controls in a single column with width 100%
columns: 1,
items: [
{boxLabel: 'Item 1', name: 'cb-col-1'},
{boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-col-3'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Multi-Column (horizontal)',
// Distribute controls across 3 even columns, filling each row
// from left to right before starting the next row
columns: 3,
items: [
{boxLabel: 'Item 1', name: 'cb-horiz-1'},
{boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-horiz-3'},
{boxLabel: 'Item 4', name: 'cb-horiz-4'},
{boxLabel: 'Item 5', name: 'cb-horiz-5'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Multi-Column (vertical)',
itemCls: 'x-check-group-alt',
// Distribute controls across 3 even columns, filling each column
// from top to bottom before starting the next column
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'cb-vert-1'},
{boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-vert-3'},
{boxLabel: 'Item 4', name: 'cb-vert-4'},
{boxLabel: 'Item 5', name: 'cb-vert-5'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Multi-Column<br />(custom widths)',
// Specify exact column widths (could also include float values for %)
columns: [100, 100],
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
{boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
{boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
{boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
]
},{
xtype: 'checkboxgroup',
itemCls: 'x-check-group-alt',
fieldLabel: 'Custom Layout<br />(w/ validation)',
allowBlank: false,
anchor: '95%',
items: [{
// You can pass sub-item arrays along with width/columnWidth configs
// ColumnLayout-style for complete layout control. In this example we
// only want one item in the middle column, which would not be possible
// using the columns config. We also want to make sure that our headings
// end up at the top of each column as expected.
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 1', name: 'cb-cust-1'},
{boxLabel: 'Item 2', name: 'cb-cust-2'}
]
},{
columnWidth: '.5',
items: [
{xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
]
},{
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 4', name: 'cb-cust-4'},
{boxLabel: 'Item 5', name: 'cb-cust-5'}
]
}]
}]
};

/*====================================================================
* RadioGroup examples
*====================================================================*/
// NOTE: These radio examples use the exact same options as the checkbox ones
// above, so the comments will not be repeated. Please see comments above for
// additional explanation on some config options.

var radioGroup = {

xtype: 'fieldset',
title: 'Radio Groups',
autoHeight: true,
collapsed: true, // initially collapse the group
collapsible: true,
items: [{
xtype: 'textfield',
name: 'txt-test4',
fieldLabel: 'Alignment Test',
anchor: '95%'
},{
xtype: 'radiogroup',
fieldLabel: 'Auto Layout',
items: [
{boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
columns: 1,
items: [
{boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
columns: 3,
items: [
{boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Multi-Column<br />(vert. auto-width)',
itemCls: 'x-check-group-alt',
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Multi-Column<br />(custom widths)',
columns: [100, 100],
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
{boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
]
},{
xtype: 'radiogroup',
itemCls: 'x-check-group-alt',
fieldLabel: 'Custom Layout<br />(w/ validation)',
allowBlank: false,
anchor: '95%',
items: [{
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
]
},{
columnWidth: '.5',
items: [
{xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
]
},{
columnWidth: '.25',
items: [
{xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
{boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
{boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
]
}]
}]
};

// combine all that into one huge form
var fp = new Ext.FormPanel({
title: 'Check/Radio Groups Example',
frame: true,
labelWidth: 110,
width: 600,
trackResetOnLoad: true,
renderTo:'form-ct',
bodyStyle: 'padding:0 10px 0;',
items: [
{
layout: 'column',
border: false,
// defaults are applied to all child items unless otherwise specified by child item
defaults: {
columnWidth: '.5',
border: false
},
items: individual
},
checkGroup,
radioGroup
],
buttons: [{
text: 'Load',
handler: function(){
fp.getForm().setValues({
autoLayout_checkgroup_id : [true, true, false, false, false]
});
/*
if(fp.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
fp.getForm().getValues(true).replace(/&/g,', '));
}
*/

}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
});
Steps to reproduce the problem:


Click the Load button.
The "autoLayout" checkbox group value is set to [true, true, false, false, false]
Click the Reset button.



The result that was expected:


After the reset button is pressed, the checkboxgroup value should go back to its latest loaded value: [true, true, false, false, false]



The result that occurs instead:


All the boxes in the checkboxgroup are cleared. They are all set to false. They go back to their original value, instead of the Last loaded value. It seems like the trackResetOnLoad parameter is ignored.


Possible fix:


not provided

Jamie Avins
10 Feb 2010, 6:58 PM
Fixed in svn.