The message window hides behind the panel

Question

The message window hides behind the panel when click Tab on Editable cell.

For example: double click the first phone cell, press TAB button. You can see the message box and then hide behind the grid window.

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [{
            'name': 'Lisa',
            "email": "[email protected]",
            "phone": "1224"
        }, {
            'name': 'Bart',
            "email": "[email protected]",
            "phone": "1234"
        }, {
            'name': 'Homer',
            "email": "[email protected]",
            "phone": "1244"
        }, {
            'name': 'Marge',
            "email": "[email protected]",
            "phone": "1254"
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var table = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name',
        editor: {
            xtype: 'textfield'
        }
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone',
        editor: {
            xtype: 'numberfield',
            hideTrigger: true,
            validateOnChange: false
        }
    }],
    height: 200,
    width: 400,
    plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2
    })],
    listeners: {
        'validateedit': function () {
            Ext.MessageBox.show({
                icon: Ext.MessageBox.ERROR,
                buttons: Ext.MessageBox.OK,
                title: 'test',
                msg: 'test'
            });
        }
    }
});
tablePanel.add(table);
tablePanel.show();

});

Anyone met such problem before?

Answer 1

I got answer from sencha site:

I see it does not do this in 4.07, but in 4.1. I will talk with dev team.

For now, you can use defer:

Code:
listeners:{
    'validateedit':function(){
        Ext.MessageBox.show({
        icon: Ext.MessageBox.ERROR,
        buttons: Ext.MessageBox.OK,
        title: 'test',
        msg: 'test'
      }).defer(100);
    }
}