ExtJS 5.0.1 - Ext.form.field.File Cell Editor w/ Ext.grid.Panel - File field editor d

Ext version tested:



Browser versions tested against:

• Chrome v37.0.2062.124 m on Windows 8.1.


• Internet Explorer v11.0.9600.17278 on Windows 8.1

Description:

The ExtJS 5.0.1 when editing a Ext.grid.Panel cell, using the "Ext.form.field.File" control as the cell editor, the field editor is not hidden when focus is lost.


Clicking on the file field cell to display the file field editor, then clicking on the whitespace outside of the grid panel does not cause the file field editor to be hidden.

NOTE: The file field editor is hidden correctly when focus is lost with ExtJS 5.0.0.

NOTE: I believe this is related to the fact that the "Ext.form.field.File" control also contains a bug where it does not fire its "blur" event.




Steps to reproduce the problem:

(1) Create an ExtJS 5.0.1 Sencha Fiddle or new Sencha Application with an Ext.grid.Panel with a field using the "Ext.form.field.File" control as an editor.

Sencha Fiddle: http://ift.tt/YQ03SA

Code:

    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":"homer@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
        }
    });


    Ext.define('Test.view.main.Main', {
        extend: 'Ext.container.Container',
        requires: [
        'Ext.grid.Panel',
        'Ext.form.field.File'
        ],

        items: [
            {
            xtype: "grid",
            title: "Test Grid",
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1
            },
            columns: [
            { 
                text: "name", 
                dataIndex: "name",
                editor: {
                xtype: "filefield"
                }
            },
            {
                text: "email",
                dataIndex: "email",
                editor: {
                xtype: 'textfield',
                allowBlank: false
                }
            },
            ]
        }
        ]
    });

    Ext.application({
        name : 'Fiddle',

        autoCreateViewport: 'Test.view.main.Main',

        launch : function() {
        }
    });

(2) Click on a "file" field cell, ie. the "name" column cell in the example, to display the "file" field cell editor.

(3) Click on the whitespace outside of the grid to "blur" focus on the editor control.

Do not click on another cell to hide the editor.




The result that was expected:

• The "Ext.form.field.File" field editor should be hidden.


• Clicking on the "file" field editor's "Browse" button should not cause the editor to be hidden


• The selected file value should be correctly set to the cell's value.

The result that occurs instead:

• Nothing happens, the "Ext.form.field.File" field editor remains displayed.

ExtJS 5.0.1 - Ext.form.field.File Cell Editor w/ Ext.grid.Panel - File field editor d