[4.1.3] While editing a cell in a grid, clicking on another grid doesn't change focus

[andyjl]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.3

Browser versions tested against:

• IE9
• Firefox 16
• Google Chrome 22

DOCTYPE tested against:

• HTML5

Description:

I have two grids on a page. The first one has the cell editing plugin. If I am currently editing a cell in the first grid, and then click on the second grid, the editor hides and it seems the focus is now in the second grid. However, if I now try to navigate around the second grid with the arrow keys, the navigation actually happens on the first grid.
In order to navigate around the second grid, I have to click on it again and then the focus will transfer to the second grid.

Steps to reproduce the problem:

• Run the sample code and begin editing a cell in the first grid.
• While still editing, click on a row in the second grid.
• Now try using the arrow keys to navigate around in the second grid.

The result that was expected:

• The focus should have been in the second grid after I clicked on it.

The result that occurs instead:

• The focus was still in the first grid.

Test Case:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons 2',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name' },
        {header: 'Email', dataIndex: 'email', flex:1 },
        {header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

HELPFUL INFORMATION

See this URL for live test case: http://levustech.com/cellediting_focusbug/

Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7 SP1 64-bit

[kevin.chen]

I tested in Ext 4.1.1, Ext 4.1.2, Ext 4.1.3, issue exists in all these version. however, tested in 4.1.0, there is no issue, seems the issue was introduced after 4.1.1

[kevin.chen]

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