ExtJS 4 - On window resize, the overflowing toolbar loses its controllers

Question

I have a viewport with the following toolbar attached to it:

{
    xtype: 'toolbar',
    enableOverflow:true,
    items:[
        {
            xtype: 'button',
            text: 'Open',
            id: 'MapOpenButton',
            iconCls: 'icon-folderopen',
            tooltip: 'Open map'
        },
        {
            xtype: 'button',
            text: 'Save',
            id: 'MapSaveButton',
            iconCls: 'saveCls',
            tooltip: 'Save map'
        },
        {
            xtype: 'button',
            text: 'Close',
            id: 'MapCloseButton',
            iconCls: 'closeCls',
            tooltip: 'Close map'
        }
    ]
}

I have this controller listening to the buttons:

Ext.define('controller.Main', {
    extend: 'Ext.app.Controller',
    views: [
        'Main'
    ],
    init: function (application) {
        this.control({
            "#MapOpenButton": {
                click: this.OpenMap
            },
            "#MapSaveButton": {
                click: this.SaveMap
            },
            "#MapCloseButton": {
                click: this.CloseMap
            }
        });
    }
});

This works perfectly until the window gets resized and the toolbar is forced to create the overflow menu. The problem is that the menu re creates the elements with different properties (new id for example). When the toolbar overflows the controller stops listening to the buttons until the window size is restored and the toolbar is normal again.

Is there a work around to this? Other than adding the handlers directly to the buttons. I've tried using itemID instead of ID, but it doesn't work either.

Thank you!

Answer 1

Use itemId not id's (it is not a good practice) and do it this way:

this.control ({ "button[itemId=someId":{ click: this.onClickOfMyButton } });

Best regards.