How to set items dynamically within menu in extjs?

Question

By clicking of button showing menu. once we select the menu need to change items dynamically in other menu. I have not defined id's to any component of this view, because if I give id's to component it will give error duplicate id found. this view is common in all view like global functionality. in the below code both items: regionType and items: americaSubregionType coming from constant file. First time i need to show those data as default item to menu in region and subregion. once i select item from Region, i need to change items dynamically in SubRegion menu. so i have gone this way click of region menu i have assigned values to subregion items: americaSubregionType you can see in below code. But it is not reflecting. old data itself is showing subregion menu items from constant file. Can anyone tell how to change items dynamically? How to achieve this one in extjs? great appreciated. Thank you.

Here is my Code

{
    xtype: 'button',
    action: 'btnFilter',
    cls: 'filterCls',
    plain: true,
    menu: {
        items: [{
            text: 'Region',
            cls: 'filterMenuCls',
            menu: {
                plain: true,
                cls: 'filterMenuCls',
                listeners: {
                    click: function (menuitem, e, opt) {
                        var grid = Ext.getCmp('GridViewId');
                        grid.store.clearFilter();
                        grid.store.filter([{
                            property: "region",
                            value: e.text,
                            anyMatch: false,
                            exactMatch: true
                        }])
                        //This one i will retrieve from grid store and assign to americaSubregionType here will changesubregion value but it is not reflecting in visible view
                        americaSubregionType = [

                            '<b class="menuTitleCls">Choose a Vessel Type</b>', {
                            text: 'ABC',
                            cls: 'filterMenuCls'
                        }, {
                            text: 'Hello',
                            cls: 'filterMenuCls'
                        }]
                    }
                },
                items: regionType
            }
        }, {
            text: 'SubRegion',
            cls: 'filterMenuCls',
            menu: {
                plain: true,
                cls: 'filterMenuCls',
                action: 'Subbb',
                listeners: {
                    click: function (menuitem, e, opt) {

                    }
                },
                items: americaSubregionType
            }
        }

        }
    }

}

Constant File data

regionType = [

    '<b class="menuTitleCls">Choose a Vessel Type</b>',
    {
        text: 'AMERICAS',
        cls: 'filterMenuCls'
    },
    {
        text: 'NORTH SEA',
        cls: 'filterMenuCls'
    },
    {
        text: 'SEA',
        cls: 'filterMenuCls'
    }
]

americaSubregionType = [

    '<b class="menuTitleCls">Choose a Vessel Type</b>',
    {
        text: 'Brazil',
        cls: 'filterMenuCls'
    },
    {
        text: 'Mexico',
        cls: 'filterMenuCls'
    },
    {
        text: 'US',
        cls: 'filterMenuCls'
    }
]

Darin Kolev Darin Kolev · Accepted Answer · 2013-05-24T11:16:14

You can set the itemId of the menu, which you need to select.

And adding items shouldn't be any problem with add() or insert() beacause each menu is a Container(Panel).

How to set items dynamically within menu in extjs?

1 Answers