View Full Version : Row Editor fails to render if grouping filed change in a grid

23 Jul 2011, 9:21 PM
Ext version tested:

Ext 4.0.2a

Browser versions tested against:

Chrome 11 (windows)


Row Editor Fails to render right row after changing the grouping.

Steps to reproduce the problem:

Create a grid with row editing feature and grouping feature
Set a default grouping field at grid store("salary" based on example code)
Edit the One row it works fine
Change the grouping field from the column menu to other column other than default("active" based on example code)(Be sure that you are grouping to a field it has child row)
Edit one row you will see that it renders another row and sent wrong ID to server.

The result that was expected:

to render right row.

The result that occurs instead:

it render different row so you are editing wrong row

Test Case:


This code has been captured from examples and added grouping feature to Grid.

enabled: true
Ext.Loader.setPath('Ext.ux', '../ux');


// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'bool' }

// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
now = new Date(),

getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;

generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
usedNames[name] = true;
return name;

while (s.getTime() < now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i < ecount; i++) {
var name = generateName();
start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
s = Ext.Date.add(s, Ext.Date.MONTH, 1);

return data;

// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
data: data,
sorters: [{
property: 'start',
direction: 'ASC'

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false

// create the grid and specify what field you want
// to use for the editor at each column.

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
// startCollapsed:true,
hideGroupedHeader :true,
groupHeaderTpl: '{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'

var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 90,
field: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {

// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: '[email protected]',
start: new Date(),
salary: 50000,
active: true
}, 'Employee');

store.insert(0, r);
rowEditing.startEdit(0, 0);
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
if (store.getCount() > 0) {
disabled: true
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {


Screenshot or Video:


See this URL for live test case: http://

Debugging already done:


Possible fix:

not provided

Additional CSS used:

only default ext-all.css
custom css (include details)

Operating System:

WinXP Pro

10 Nov 2011, 12:41 PM
Any informations or workarounds for this one in the meantime?

I came this behaviour across today. It is really annoying.
Grouping is such a nice feature as long as you dont try to manipulate the underlying records.

After grouping, the underlying records are not reloaded correctly.

Appreciate any hints.


10 Nov 2011, 1:15 PM
After inspecting, debugging and what not, I think we found the problem.

The problem lies in the "Ext.view.View" that is used to get the selected row inside the grid.
If you select a row, the index of the selected row is just the index in the View and not the index the record got in the store.

So to say, when grouping applies, the store index is not mapped correctly to the view.
Thats why wrong records are used when selecting and manipulating grouped rows in a grid.

Maybe the Ext.view.View was never intended to support grouping? Rather the grid itself should identify the selected row.


10 Nov 2011, 11:57 PM
I didn't spend time on this problem after that.
Ext 4.0 was so slow in grids with more than 50+ rows in IE. in IE6, its not able render even.
Complex applications cause memory problem especially in IE. It was shame but i shifted application to to lightest and more stable version that is 2.2