Results 1 to 4 of 4

Thread: [4.1.2] CellEditing issue in IE on pages with large DOM tree

    You found a bug! We've classified it as EXTJS-7423 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Vote Rating

    Default [4.1.2] CellEditing issue in IE on pages with large DOM tree

    Ext version tested:
    • Ext 4.1.0
    • Ext 4.1.1rc1
    • Ext 4.1.1rc2

    Browser versions tested against:
    • IE8

    • Using the CellEditing plugin with clicksToEdit: 1 should allow the user to switch between editing different cells with a single click. However, in pages with a large number of DOM elements in IE, this isn't always true - clicking on a cell while the editor is currently open on a different cell sometimes causes the editor to close without reopening on the new cell.
    • This does not appear to be an issue in Firefox or Chrome.
    • I can reproduce this behavior in ExtJS going back to version 4.1.0.

    Steps to reproduce the problem:
    • Create a page with a substantial number of DOM elements.
    • Open a grid on the same page, configured to use a CellEditing plugin with clicksToEdit equal to 1.
    • Click on an editable cell, observe that the editor opens properly on that cell.
    • With the editor still open, click on a different editable cell.

    The result that was expected:
    • The editor should consistently close on the old cell being edited and reopen on the cell that was just clicked.

    The result that occurs instead:
    • The editor closes on the old cell, but (sporadically) does not reopen on the cell just clicked.

    Test Case:
    You may need to adjust the values of "rows" and "cols" below to be able to consistently reproduce the behavior. I can reproduce the issue intermittently with as few as 50 rows and 20-30 columns, but it seems to happen much more frequently with a larger number of rows and columns.
    Ext.onReady(function() {
        // Number of elements to add to the page.
        var rows = 150;
        var cols = 35;
        // Generate some random data.
        var colors = [];
        var getColor = function() {
            return "#" + Ext.String.leftPad(((1<<24)*Math.random()|0).toString(16), 6, '0');
        for (var i = 0; i < rows; i++) {
            colors[i] = [];
            for (var j = 0; j < cols; j++) {
        // Add the elements to the DOM.
        var template = new Ext.XTemplate(
            '<tpl for=".">',
                    '<tpl for=".">',
                        '<span style="color:{.};background-color:{[this.getColor()]}">{.}</span>',
                getColor: getColor
        ).append(Ext.getBody(), colors);
        // Show the window and grid.
        Ext.create('Ext.window.Window', {
            layout: 'fit',
            height: 200,
            width: 400,
            items: [{
                xtype: 'grid',
                store: new{
                    fields:['name', 'email'],
                    data: [
                        {"name":"Lisa", "email":""},
                        {"name":"Bart", "email":""},
                        {"name":"Homer", "email":""},
                        {"name":"Marge", "email":""}
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json',
                            root: 'items'
                columns: [{
                    header: 'Name',
                    dataIndex: 'name'
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                plugins: [
                    Ext.create('Ext.grid.plugin.CellEditing', {
                        clicksToEdit: 1
    Debugging already done:
    • This seems like it might be an issue with event timing in IE, where the editor's "blur" event fires after the "click" event, so that the "blur" causes the editor to close immediately after it is opened on the new cell.

    Possible fix:
    This override to remove the delay on the "blur" event seems to work around the issue, though I'm not entirely sure why.
    • Code:
      Ext.define('EditorBlur', {
          override: 'Ext.Editor',
          initComponent: function() {
              var me = this;
              me.mun(me.field, 'blur', me.onFieldBlur, me, { delay: 1 });
              me.mon(me.field, 'blur', me.onFieldBlur, me);

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Win7

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Thanks for the report! I have opened a bug in our bug tracker.

    I can see this in IE9 also. And in both IE8/IE9 you can also see this by navigating via tab press.

  3. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Nice test case btw!
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2009
    Vote Rating


    I have run into a similar/same issue. I have added a listener for "specialkey" on the editor field (textfield in this case) that will move the opened editor down a row if CTRL+DOWN is typed, or up if CTRL+UP is typed.

    The problem is, the editor sometimes fails to open on the next row.

    I believe this issue is in fact a duplicate of another bug reported earlier but never 'opened'.

    In this bug it is shown that the problem is a race condition between the CellEditing plugin and the Row/CellModel.

    I have worked-around the issue for myself by increasing the task delay in the Ext.grid.plugin.CellEditing.startEdit() code.

        startEdit: function(record, columnHeader,  context) {
            var me = this,
            context = context || me.getEditingContext(record, columnHeader);
            if (!context || !me.grid.view.isVisible(true)) {
                return false;
            record = context.record;
            columnHeader = context.column;
            if (columnHeader && !columnHeader.getEditor(record)) {
                return false;
            context.originalValue = context.value = record.get(columnHeader.dataIndex);
            if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel) {
                return false;
            ed = me.getEditor(record, columnHeader);
                row: context.rowIdx,
                column: context.colIdx
            if (ed) {
    * MODIFIED SOURCE: increased task delay from 15 to 50ms to improve reliability of cell transition on key presses.  See sencha bug:
    //            me.editTask.delay(15, me.showEditor, me, [ed, context, context.value]);
                me.editTask.delay(50, me.showEditor, me, [ed, context, context.value]);
                return true;
            return false;
    The workaround above is fine for our LAN but clearly setting this value for different network environments is an in-elegant solution. Surely this code could be refactored such that the delay is unecessary, and the race condition is eliminated?

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