Dynamically added menucheckitem to cycle does not behave like a cycle anymore

I have a cycle menu with dynamically added menucheckitem(s).

The cycle works fine when the items are statically defined, however does not behave like a cycle anymore when dynamically added.

Namely, the selected item does not display on the cycle, and the cycle doesn't "cycle" when clicked.

How do I get the original cycle behavior back?

Here is the code snippet:

Code:

Ext.define('Portal.view.NavHeader', {
    extend : 'Ext.panel.Header',
    alias : 'widget.navheader',
    itemId : 'navheader',
    layout : {
        type : 'hbox'
    },
    border : 0,
    margins : '10 10 10 10',
    items : [ {
        xtype : 'cycle',
        id : 'date-menu-cycle',
        showText : true,
        width : 80,
        height : 30,
        margins : '4 4 4 4',
        menu : {
            xtype : 'menu',
            id : 'date-menu',
            items : []
        }
    } ],
    listeners : {
        beforerender : function() {
            var dt = new Date();
            var menuBar = Ext.getCmp("date-menu");
            for (var i = -4; i <= 4; i++) {
                menuBar.add({
                    xtype : 'menucheckitem',
                    group: 'datemenuitems',
                    text : Ext.Date.format(Ext.Date.add(dt, Ext.Date.MONTH, i), "M Y"),
                    checked: i==0
                });
            }
        }
    }
});

Thank You



Dynamically added menucheckitem to cycle does not behave like a cycle anymore