PDA

View Full Version : radio does not respect form.trackOnLoad (with working example)



oger000
17 Jun 2011, 2:16 AM
Cycle through the store. Form gets dirty after radio / radiogroup is changed via form.loadRecord. Same happens with form.load.

If you comment out the radiogroup from the form everything workes fine - that means form never gets dirty from loadRecord.



Ext.onReady(function() {

var currentId = 0;

var store = Ext.create('Ext.data.Store', {
fields: [ 'id', 'text1', 'radio1' ],
data: [
{ id: 1, text1: 'text1', radio1: 'C1' },
{ id: 2, text1: 'text2', radio1: 'C2' },
{ id: 3, text1: 'text3', radio1: 'C3' },
]
});


var form = Ext.create('Ext.form.Panel', {
bodyPadding: 15,
trackResetOnLoad: true,
items: [
{ xtype: 'textfield', fieldLabel: 'Text', name: 'text1' },
{ xtype: 'radiogroup', fieldLabel: 'Radiogroup',
items: [ { boxLabel: 'choice1', name: 'radio1', inputValue: 'C1' },
{ boxLabel: 'choice2', name: 'radio1', inputValue: 'C2' } ]
},
],
});


var win = Ext.create('Ext.window.Window', {
title: 'radiogroup demo1',
height: 200, width: 400,
layout: 'fit',
items: [ form ],
buttons: [
{ text: 'Next',
handler: function(button, event) {
if (++currentId > 3) { currentId = 1; }
form.loadRecord(store.getById(currentId));
//Ext.defer(function() { alert('formDirty=' + form.getForm().isDirty()); }, 500);
alert('formDirty=' + form.getForm().isDirty());
}
},
]
});

win.show();

});

oger000
19 Jun 2011, 7:55 AM
It was like christmas when I found the possiblity to correct the bug by reseting all dirty flags of all fields in the form in the 'actioncomplete' event.

Wouldnt it make sense to do something like that in the original form source instead of burden the load to the individual field? Just an idea ;-)

To share my workaround:


/*
* Unset the dirty state of a form
* @form: Form which dirty state should be removed
*/
Oger.extjs.resetDirty = function(form) {

// if a form panel is given than get the underlaying basic form
if (typeof form.getForm == 'function') {
form = form.getForm();
}

var processField = function(field) {
if (field.getXType() == 'radiogroup' || field.getXType() == 'checkboxgroup' ) {
// group items are separate fields so handling of group is not necessary
}
else {
field.resetOriginalValue();
}
};

form.getFields().each(processField);
}; // eo reset dirty

medifirst
1 Dec 2011, 5:17 AM
REQUIRED INFORMATION


Ext version tested:


Ext 4.0.7
Ext 4.0.6



Browser versions tested against:


Firefox 8





Description:
in my application or in the extjs example, a form wich contains a radiogroup is always dirty after the call of "loadrecord" although "trackResetOnLoad" option is enabled
For the test, I modify the extjs4.0.7/examples/form/form-grid.js

After each 'loadrecord', an alert displays the result of "isDirty()" : the result is always "true".

If I suppress the "radiogroup", "isDirty" works perfectly.
This problem appears in version 4.0.6 and 4.0.7 and I test it under Firefox 8.0.1.

Steps to reproduce the problem:
Select a row in the grid :an alert is displayed

The result that was expected:
false is expected

The result that occurs instead:
always true is displayed

Test Case:




Ext.require([
'Ext.form.*',
'Ext.data.*',
'Ext.grid.Panel',
'Ext.layout.container.Column'
]);


Ext.onReady(function(){

Ext.QuickTips.init();

var bd = Ext.getBody();

// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

var ds = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
// Rating dependent upon performance 0 = best, 2 = worst
{name: 'rating', type: 'int', convert: function(value, record) {
var pct = record.get('pctChange');
if (pct < 0) return 2;
if (pct < 1) return 1;
return 0;
}}
],
data: myData
});


// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// render rating as "A", "B" or "C" depending upon numeric value.
function rating(v) {
if (v == 0) return "A";
if (v == 1) return "B";
if (v == 2) return "C";
}


bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});

/*
* Here is where we create the Form
*/
var gridForm = Ext.create('Ext.form.Panel', {
id: 'company-form',
frame: true,
title: 'Company data',
bodyPadding: 5,
trackResetOnLoad : true,
width: 750,
layout: 'column', // Specifies that the items will now be arranged in columns

fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},

items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: ds,
height: 400,
title:'Company Data',

columns: [
{
id :'company',
text : 'Company',
flex: 1,
sortable : true,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
text: 'Rating',
width: 30,
sortable: true,
renderer: rating,
dataIndex: 'rating'
}
],

listeners: {
selectionchange: function(model, records) {
if (records[0]) {
this.up('form').getForm().loadRecord(records[0]);
alert(this.up('form').getForm().isDirty());
}
}
}
}, {
columnWidth: 0.4,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Company details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'company'
},{
fieldLabel: 'Price',
name: 'price'
},{
fieldLabel: '% Change',
name: 'pctChange'
},{
xtype: 'datefield',
fieldLabel: 'Last Updated',
name: 'lastChange'
}, {
xtype: 'radiogroup',
fieldLabel: 'Rating',
columns: 3,
defaults: {
name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
},
items: [{
inputValue: '0',
boxLabel: 'A'
}, {
inputValue: '1',
boxLabel: 'B'
}, {
inputValue: '2',
boxLabel: 'C'
}]
}]
}],
renderTo: bd
});


gridForm.child('gridpanel').getSelectionModel().select(0);

});