Results 1 to 4 of 4

Thread: Row Editor fails to render if grouping filed change in a grid

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default Row Editor fails to render if grouping filed change in a grid

    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: '',
            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(' ', '.') + '',
                        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('', {
            // 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:
    • attached

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

    Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)

    Operating System:
    • ________
    • WinXP Pro
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2011


    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.


  3. #3
    Sencha User
    Join Date
    Mar 2011


    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.


  4. #4

    Default 4.0 was slow so ignored the case

    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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts