ExtJS 5.0.1 - Ext.form.field.Picker - Picker incorrectly aligned after window resize.

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:

Non-left aligned 'picker' elements, such as Ext.form.field.Combobox's droplist, are incorrectly repositioned after the window is resized.

NOTE : The picker is re-aligned with its anchor element (ie. text field) when the window's 'resize' event is fired.

However, the 'resize' event is fired for the 'picker' before the anchor element is repositioned/re-layed-out.

Thus, the 'picker' is aligned against the anchor element's old position.

NOTE : The issue does not occur in ExtJS 5.0.0 rev 736.

Steps to reproduce the problem:

(1) Create an ExtJS 5.0.1 Sencha Fiddle or new Sencha Application with an Ext.form.field.Combobox (or other picker-field), horizontally aligned 'center' (ie. "pack: center").

Sencha Fiddle: http://ift.tt/1w1OTWG

Code:

    // The data store containing the list of states
    Ext.create('Ext.data.Store', {
        storeId: 'statesStore',
        fields: ['abbr', 'name'],
        data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
        ]
    });

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

        layout: {
            type: 'hbox',
            pack: 'center'
        },

        items: [
        {
            xtype: 'combobox',
            fieldLabel: 'Choose State',
            store: Ext.data.StoreManager.lookup('statesStore'),
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr'
        },
        {
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'To',
            name: 'to_date',
            value: new Date()  // defaults to today
        }
        ]
    });

    Ext.application({
        name : 'Fiddle',

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

        launch : function() {
        }
    });

(2) Click on the combobox's down arrow to open the droplist (ie. 'picker').

(3) While the droplist/picker is displayed, increase an decrease the window's width a few times.

The result that was expected:

• The droplist/picker should be correctly aligned with the combobox field's new position.

The result that occurs instead:

• The droplist/picker is incorrectly aligned with the combobox field.


• The issue can be demonstrated using other 'picker' controls as well.

ExtJS 5.0.1 - Ext.form.field.Picker - Picker incorrectly aligned after window resize.