PDA

View Full Version : [CLOSED] [4.1 B3] form.loadRecords breaks when record contains field 'length'



KajaSheen
8 Mar 2012, 6:55 AM
I think this is related to EXTJSIV-5217 (http://www.sencha.com/forum/showthread.php?176466-4.1-20120123-Unable-to-use-class-model-fields). I have a field named 'length' in my model. Using it in a grid now works fine, just as does any other reserved keyword I tried. But now, when linking this to a form and doing a loadRecord(), it does not work.

I changed the form-grid example to reflect this:



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

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;
}},
{name: 'length'}
],
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,
width: 850,
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'
},
{
text : 'Length',
width : 75,
sortable : true,
dataIndex: 'length'
}
],

listeners: {
selectionchange: function(model, records) {
if (records[0]) {
this.up('form').getForm().loadRecord(records[0]);
}
}
}
}, {
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'
}]
},{
fieldLabel: 'Length',
name: 'length'
}]
}],
renderTo: bd
});


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

mitchellsimoens
8 Mar 2012, 4:03 PM
That fix should handle this. I would still stay away from JavaScript reserved words.

mankz
8 Mar 2012, 11:34 PM
length is not a JS reserved word, this sounds like an Ext bug...

https://developer.mozilla.org/en/JavaScript/Reference/Reserved_Words

KajaSheen
9 Mar 2012, 2:28 AM
I'd like to stay away from that word, but my backend guys provide me with the model and it seems that the backend object needs to have length. And it does not help to rename the field or do a mapping, since the submitted name of the field should be length...

Any suggestions, or do you need additional input, since the message says, that the test case is bad?

REQUIRED INFORMATION


Ext version tested:
Ext 4.1 B3

Browser versions tested against:
IE8 FF10 (firebug 1.9) Safari 4

DOCTYPE tested against:
strict

Description:
Like above, my model has a field named length. When doing a form.loadRecord(record) the whole form stays empty.

Steps to reproduce the problem:
Have a model with 'length' Create a record and a form and do a form.loadRecord()

The result that was expected:
Form displays the values loaded

The result that occurs instead:
Form is empty

Test Case:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Form with embedded Grid</title>
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- Shared -->
<link rel="stylesheet" type="text/css" href="../shared/example.css" />

<!-- GC -->


<script type="text/javascript" src="../../ext-all-debug-w-comments.js"></script>

<!-- Example -->
<script type="text/javascript" src="form-grid.js"></script>
</head>
<body>
<h1>Dynamic Form interacting with an embedded Grid</h1>

<p>
This Form demonstrates the fact that by virtue of inheriting from the Ext <b><tt>Container</tt></b>
class, an Ext.form.Panel can contain any Ext <b><tt>Component</tt></b>. This includes all the
subclasses of Ext.Panel, including the GridPanel.
</p>
<p>
The Grid demonstrates the use of creation of derived fields in a Record created using a custom
<b><tt>convert</tt></b> function, and the use of column renderers.
</p>
<p>
The Form demonstrates the use of radio buttons grouped by name being set by the value of the derived
'rating' field.
</p>
</body>
</html>




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

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;
}},
{name: 'length'}
],
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,
width: 850,
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'
},
{
text : 'Length',
width : 75,
sortable : true,
dataIndex: 'length'
}
],

listeners: {
selectionchange: function(model, records) {
if (records[0]) {
this.up('form').getForm().loadRecord(records[0]);
}
}
}
}, {
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'
}]
},{
fieldLabel: 'Length',
name: 'length'
}]
}],
renderTo: bd
});


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



HELPFUL INFORMATION

See this URL for live test case:
http://dl.dropbox.com/u/3319901/extjs/examples/form/form-grid.html


Debugging already done:
FB Output:
me is not defined
/ext-all-debug-w-comments.js
Line 124085

Possible fix:
not provided

Additional CSS used:
only default ext-all.css

Operating System:
Win7 Pro