PDA

View Full Version : [CLOSED] Grid Grouping + Editing: Uncaught TypeError: Cannot read property 'name' of undefined



smatric
15 Nov 2011, 1:28 PM
Hi,

I have a problem with editing cells that belong to a date column that is set as a grouping column (groupField property in store). Whenever the value is changed, Google Chrome is generating the following error (before firing 'edit' event on Ext.grid.plugin.CellEditing):


Uncaught TypeError: Cannot read property 'name' of undefinedExt.define.getPrintData GroupingSummary.js:164
Ext.define.printSummaryRow AbstractSummary.js:83
method ext-debug.js:2382
evaluatedFn
tpl.compiled XTemplate.js:438
Ext.define.applySubTemplate XTemplate.js:323
evaluatedFn
tpl.compiled XTemplate.js:429
Ext.define.applySubTemplate XTemplate.js:323
evaluatedFn
tpl.compiled XTemplate.js:438
Ext.define.applyTemplate XTemplate.js:446
Ext.define.overwrite Template.js:305
Ext.define.bufferRender AbstractView.js:479
Ext.define.onUpdate AbstractView.js:490
Base.callParen text-debug.js:4800
Ext.define.onUpdate Table.js:588
Base.callParent ext-debug.js:4800
Ext.define.onUpdate View.js:90
fire ext-debug.js:16976
Ext.define.continueFireEvent Observable.js:291
Ext.define.fireEvent Observable.js:264
Ext.define.afterEdit AbstractStore.js:680
Ext.define.callStore Model.js:1275
Ext.define.afterEdit Model.js:1243
Ext.define.set Model.js:832
Ext.define.onEditComplete CellEditing.js:361
fire ext-debug.js:16976
Ext.define.continueFireEvent Observable.js:291
Ext.define.fireEvent Observable.js:264
Ext.override.fireEventEvent Bus.js:35
Ext.define.completeEdit Editor.js:403
Ext.define.onBlur Editor.js:450
call ext-debug.js:16781


The field (column) I'm using for grouping is defined as follows:
{name: 'date', type: 'date', dateFormat: 'Y-m-d'},

But if I change groupingField to a float column:
{name: 'time', type: 'float'}
everything works fine.

I'm I doing something wrong? Or is this a bug?


Here are some excerpts from my code:

Model:

Ext.define('Pika.model.TaskLog',{
extend: 'Ext.data.Model',
fields: [
'id',
...
{name: 'date', type: 'date', dateFormat: 'Y-m-d'},
{name: 'time', type: 'float'}
]
});

Store:

Ext.define('Pika.store.TaskLogUser', {
extend: 'Ext.data.Store',
autoLoad: true,
model: 'Pika.model.TaskLog',
groupField: 'date',
...
});

View:

Ext.define('Pika.view.timesheet.Grid', { extend: 'Ext.grid.Panel',
alias: 'widget.timesheetGrid',
store: 'TaskLogUser',
columns: gridColumns,
dockedItems: gridDockedItems,
columnLines: true,
features: [{
id: 'date',
ftype: 'groupingsummary',
groupHeaderTpl: '',
hideGroupedHeader: false,
enableGroupingMenu: false
}],
plugins: [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
...
});

mitchellsimoens
19 Nov 2011, 1:53 PM
Can you provide a full, locally runnable test case to produce this error?

smatric
21 Nov 2011, 3:31 PM
<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var gridData = [
{ 'id': 7, 'date': '2011-11-13' },
{ 'id': 8, 'date': '2011-11-13' }
];


var store = Ext.create('Ext.data.Store', {
fields: ['id', {name: 'date', type: 'date', dateFormat: 'Y-m-d'}],
groupField: 'date',
data: gridData,
proxy: { type: 'memory', reader: {type: 'json'} }
});


var grid = Ext.create('Ext.grid.Panel', {
store: store,
features: [{
id: 'date',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: false,
enableGroupingMenu: false
}],
columns: [
{
header: 'ID',
dataIndex: 'id'
}, {
header: 'Date',
dataIndex: 'date',
field: { xtype: 'datefield', format: 'm/d/y' },
flex: 1
}],
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: { stripeRows: true },
plugins: [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
edit: function(editor, e, options){
console.log('Editing cell');
e.record.commit();
}
}
}) ]
});
});



</script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>

Click on one of the date fields and change the date to for example "11/12/11". In Google Chrome it will cause the following error:


Uncaught TypeError: Cannot read property 'name' of undefined

vbenso
12 Jan 2012, 12:45 PM
Hi,

I've just bumped into the same problem here, at least I think so, the error message is the same, but the setup is a little different. I'm editing a grid using the Row Editor plugin, and in this grid there is a column that uses grouping (I'm grouping dates in "Past", "Today", "In the Next 7 days", "In the Next 30 days").
Mateusz, did you manage to go around this issue?

evant
12 Jan 2012, 3:06 PM
I wasn't able to reproduce this using the 4.1 code. Marking this issue as closed.

smatric
15 Jan 2012, 4:40 PM
Re: vbenso

As evant already stated the issue has been fixed in 4.1. I tested it with our code and it works just fine.