Results 1 to 4 of 4

Thread: "beforeedit" event fired of next cell fired before "edit" event of current cell

    You found a bug! We've classified it as EXTJS-11376 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    15

    Default "beforeedit" event fired of next cell fired before "edit" event of current cell

    4.2.2 (pre-release) has some fix we need. However, it introduced a different behavior from 4.2.1 and previous versions. The attached code will demonstrate the difference.

    4.2.1 or earlier
    When you enter a cell, it triggers "beforeedit" event. You make some changes and you "tab" to next cell. This triggers "edit" event from 1st cell, then "beforeedit" of the next cell.

    4.2.2
    The behavior has changed. When we "tab" to next cell, it first triggers "beforeedit" of the next cell, then the "edit" event of the first cell. The sequence of events has changed.

    https://fiddle.sencha.com/#fiddle/lu

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['num1', 'num2', 'num3'],
        data:{'items':[
            {"num1":1, "num2":2, "num3":3},
            {"num1":1, "num2":2, "num3":3},
            {"num1":1, "num2":2, "num3":3}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
     
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Num1',  dataIndex: 'num1', 
                 editor : {
                    xtype : 'numberfield',
                    selectOnFocus: true,
                    minValue : 0.01,
                    decimalPrecision : 2,
                    enforceMaxLength : true,
                    allowBlank : false,
                    blankText : 'Num1 cannot be blank.',
                    minText : 'Num1 must be greater than 0.',
                    hideTrigger : true,
                    keyNavEnabled : false,
                    mouseWheelEnabled : false
                }
            },
          {header: 'Num2',  dataIndex: 'num2', 
                 editor : {
                    xtype : 'numberfield',
                    selectOnFocus: true,
                    minValue : 0.01,
                    decimalPrecision : 2,
                    enforceMaxLength : true,
                    allowBlank : false,
                    blankText : 'Num2 cannot be blank.',
                    minText : 'Num2 must be greater than 0.',
                    hideTrigger : true,
                    keyNavEnabled : false,
                    mouseWheelEnabled : false
                }
            },
          {header: 'Num3',  dataIndex: 'num3', 
                 editor : {
                    xtype : 'numberfield',
                    selectOnFocus: true,
                    minValue : 0.01,
                    decimalPrecision : 2,
                    enforceMaxLength : true,
                    allowBlank : false,
                    blankText : 'Num3 cannot be blank.',
                    minText : 'Num3 must be greater than 0.',
                    hideTrigger : true,
                    keyNavEnabled : false,
                    mouseWheelEnabled : false
                }
            }    ],
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        listeners: {
            'beforeedit':    function (e, editor) {
                console.log('beforeedit ' + editor.field);
            },
            'edit': function (editor, e, opts) {
                console.log('edit ' + e.field);
            }
        }
    });
    I compared cellediting.js between 4.2.1 and 4.2.2.
    In the startEdit function of 4.2.2, currently the codes are

    Code:
                // If there is an editor for this column,
                // allow vetoing, or setting a new editor *before* we call getEditor
                isFieldEditable = (columnHeader && columnHeader.getEditor(record)) && !(me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel);
    
    
                if (isFieldEditable) {
                    ed = me.getEditor(record, columnHeader);
                    isEditorEditing = ed.editing;
                }
    
    
                // Complete the edit now, before getting the editor's target cell DOM element.
                // Completing the edit hides the editor, causes a row update and sets up a delayed focus on the row.
                // Also allows any post-edit events to take effect before continuing
                me.completeEdit();
    
    
                if (!isFieldEditable) {
                    return false;
                }
    if i do "me.completeEdit()" first, it would solve the problem i encounter. but i cannot confirm if this is the correct solution or not.
    Code:
                // Complete the edit now, before getting the editor's target cell DOM element.
                // Completing the edit hides the editor, causes a row update and sets up a delayed focus on the row.
                // Also allows any post-edit events to take effect before continuing
                me.completeEdit();
    
    
                // If there is an editor for this column,
                // allow vetoing, or setting a new editor *before* we call getEditor
                isFieldEditable = (columnHeader && columnHeader.getEditor(record)) && !(me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel);
    
    
                if (isFieldEditable) {
                    ed = me.getEditor(record, columnHeader);
                    isEditorEditing = ed.editing;
                }
    
    
                if (!isFieldEditable) {
                    return false;
                }
    Last edited by Gary Schlosberg; 25 Sep 2013 at 10:43 AM. Reason: Added test fiddle

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

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

  3. #3
    Sencha User
    Join Date
    Nov 2013
    Location
    Chennai
    Posts
    15

    Default

    Hi I am having a serious trouble because of this interchange of edit events!!!

    Is there any workaround available for this bug with extjs 4.2.2 version ?

    Thank You

  4. #4

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
  •