grid CellEditing + selection.RowModel loses focus on tab

[ericwaldheim]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• IE8

DOCTYPE tested against:

• ____

Description:

• Focus jumps to Address bar instead of staying in grid

Steps to reproduce the problem:

• Modify the extjs cell editing grid example to use selection.RowModel instead of selection.CellModel.
• Click on 1st cell
• Press and hold down the tab key.

The result that was expected:

• Focus walks through grid cells one at a time until hitting last cell in grid and stopping.

The result that occurs instead:

• Focus will jump to the IE8 address bar and then back to grid and continue to jump around.

Test Case:

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

Ext.require([
    'Ext.selection.RowModel',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*',
    'Ext.ux.CheckColumn'
]);

if (window.location.search.indexOf('scopecss') !== -1) {
    // We are using ext-all-scoped.css, so all rendered ExtJS Components must have a
    // reset wrapper round them to provide localized CSS resetting.
    Ext.scopeResetCSS = true;
}

Ext.onReady(function(){
    Ext.QuickTips.init();
 
    function formatDate(value){
        return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
    }

    Ext.define('Plant', {
        extend: 'Ext.data.Model',
        fields: [
            // the 'name' below matches the tag name to read, except 'availDate'
            // which is mapped to the tag 'availability'
            {name: 'common', type: 'string'},
            {name: 'botanical', type: 'string'},
            {name: 'light'},
            {name: 'price', type: 'float'},
            // dates can be automatically converted by specifying dateFormat
            {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
            {name: 'indoor', type: 'bool'}
        ]
    });


    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'Plant',
        proxy: {
            type: 'ajax',
            // load remote data using HTTP
            url: 'plants.xml',
            // specify a XmlReader (coincides with the XML format of the returned data)
            reader: {
                type: 'xml',
                // records will have a 'plant' tag
                record: 'plant'
            }
        },
        sorters: [{
            property: 'common',
            direction:'ASC'
        }]
    });

    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });

    // create the grid and specify what field you want
    // to use for the editor at each header.
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [{
            id: 'common',
            header: 'Common Name',
            dataIndex: 'common',
            flex: 1,
            editor: {
                allowBlank: false
            }
        }, {
            header: 'Light',
            dataIndex: 'light',
            width: 130,
            editor: new Ext.form.field.ComboBox({
                typeAhead: true,
                triggerAction: 'all',
                selectOnTab: true,
                store: [
                    ['Shade','Shade'],
                    ['Mostly Shady','Mostly Shady'],
                    ['Sun or Shade','Sun or Shade'],
                    ['Mostly Sunny','Mostly Sunny'],
                    ['Sunny','Sunny']
                ],
                lazyRender: true,
                listClass: 'x-combo-list-small'
            })
        }, {
            header: 'Price',
            dataIndex: 'price',
            width: 70,
            align: 'right',
            renderer: 'usMoney',
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 0,
                maxValue: 100000
            }
        }, {
            header: 'Available',
            dataIndex: 'availDate',
            width: 95,
            renderer: formatDate,
            editor: {
                xtype: 'datefield',
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            }
        }, {
            xtype: 'checkcolumn',
            header: 'Indoor?',
            dataIndex: 'indoor',
            width: 55,
            stopSelection: false
        }, {
            xtype: 'actioncolumn',
            width:30,
            sortable: false,
            items: [{
                icon: '../shared/icons/fam/delete.gif',
                tooltip: 'Delete Plant',
                handler: function(grid, rowIndex, colIndex) {
                    store.removeAt(rowIndex); 
                }
            }]
        }],
        selModel: {
            selType: 'rowmodel'
        },
        renderTo: 'editor-grid',
        width: 600,
        height: 300,
        title: 'Edit Plants?',
        frame: true,
        tbar: [{
            text: 'Add Plant',
            handler : function(){
                // Create a model instance
                var r = Ext.create('Plant', {
                    common: 'New Plant 1',
                    light: 'Mostly Shady',
                    price: 0,
                    availDate: Ext.Date.clearTime(new Date()),
                    indoor: false
                });
                store.insert(0, r);
                cellEditing.startEditByPosition({row: 0, column: 0});
            }
        }],
        plugins: [cellEditing]
    });

    // manually trigger the data store load
    store.load({
        // store loading is asynchronous, use a load listener or callback to handle results
        callback: function(){
            Ext.Msg.show({
                title: 'Store Load Callback',
                msg: 'store was loaded, data available for processing',
                modal: false,
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        }
    });
});

HELPFUL INFORMATION
Drop in this code in place of cell-editing.js. Then run the cell-editing.html example.


Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

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

Operating System:

• Windows 7 Enterprise

[ruslan.talpa]

Any progress with this?
It's seems that it's a case of "race condition"

If the backend is fast (15ms) then the order of the events will be this:
1) after record update first the RowModel will execute a "focus" on the entire row
2)CellEditing plugin will execute a focus on the edit field in this line:
me.editTask.delay(15, me.showEditor, me, [ed, context, value]);

If the backend is slow then the order will change:
1) The editor will be focused and will show for a second
2) the row will finish updating and the RowModel will focus the row element, which in turn will trigger a blur event on the editor

It seems that the soulution would be for the RowModel not to trigger a focus after the update and the line 288 (with the delayed task) in CellEditing is a hack and it works only in the examples since the trip to the backend is very fast.


Another way to test this is use the "restful" example, and turn on "cell editing" for that grid.
Make sure that it runs correctly.
After this edit the app.php file and add:
sleep(3);
just before the echo line.

This will change the order in which the focus events occur and should show it's a case of race condition.

[ruslan.talpa]

If anyone is interested here is a fix that works for me:

Ext.override(Ext.view.Table, {
    onUpdate : function(store, record, operation, changedFieldNames){
        var me = this,
            restoreLastFocused = false,
            isEditing = me.editingPlugin && me.editingPlugin.editing;
        if(isEditing && operation === Ext.data.Model.COMMIT && record === me.selModel.lastFocused){
            me.selModel.lastFocused = null;
            restoreLastFocused = true;
        }
        me.callOverridden(arguments);
        if(restoreLastFocused){
            me.selModel.lastFocused = record;
        }
    }
}); 

[mysticav]

That fix didn't help. The using of tab on editing stills jumping around inconsistently. Sometimes it skips one cell, some times it goes to the lower cell, sometimes it skips 2 or 3 cells.

[Animal]

Try this:

Ext.override(Ext.view.Table, {
    refresh: function() {
        var me = this;
        me.callParent(arguments);
        me.headerCt.setSortState();
        me.selModel.onLastFocusChanged(null, me.selModel.lastFocused);
    }
});

By which I mean delete that last line.

[ericwaldheim]

Tried it. (Pasted at line 16 of modified cell-editing.js)

It did not fix it in IE8.

thanks.

[Animal]

What did it not fix?

The restful example, when the delay was put into the PHP file, the refresh caused by the returned data (3 seconds after uploading it) would focus the previously focused row. This would blur the currently displayed editor wherever it happened to be moved to.

The override fixes that.

I don't think the TableView class is existent at line 16 in cell-editing.js . The requires fires off some loads, but they are not guaranteed to be there until onReady

[ericwaldheim]

It does not fix the fact that in IE8 when holding down the tab key (and expecting focus to zip through the cells) focus keeps jumping to the address bar.

This bug is not related to async loading it occurs after all the data is loaded.

Thanks.

[Animal]

I see what you mean. That's another bug. I'll try to include it in this ticket.

[mmuoio]

I know it's only been a couple weeks, but any progress on this? I'm having a similar issue when trying to load my application in TideSDK which uses an older customized version of webkit. Everything works perfectly fine in Chrome which makes debugging a solution quite painful.