1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default How to set items dynamically within menu in extjs?

    How to set items dynamically within menu in extjs?


    Hi, I am doing 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 given 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 any one tell how to change items dynamically?. How to achieve this one in extjs? great appreciated. Thank you.


    Here is my Code


    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


    Code:
     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'
            }
        ]

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    In your click handler you'll need to get a reference to the submenu for subregion and do a removeAll() and add() where you add the array of new menuitems you want to show up under the submenu.

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default


    Thank you for your reply, I have already done by taking reference, removing menu items adding items but it is not working. Can you look below code.
    Code:
     refs:[
            {
                ref: 'subRegion',
                selector: 'filterView > button> menuitem[text="SubRegion"]'            
            },
            {
                ref: 'btnFilter',
                selector: 'filterView > button'
            },
    ]
    Code:
     var a = this.getSubRegion()
            a.menu.removeAll();
            console.log(a); //  Now here dont have items of SubRegion
            a.menu.add(subregionValue); // Here i am adding new items SubRegion Value
            console.log(a); //  Now here have Newly added items of SubRegion
            console.log(this.getSubRegion());//  Now here have Newly added items of SubRegion
            console.log(this.getBtnFilter());//  Now here have Newly added items of SubRegion
    But Problem is, in view it is not showing newly added items showing old sub-region. means menu is not refreshed but when i gone to console it contains newly added sub-regions i can see. Can you tell me how to refresh this menu items.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Hmm... maybe try a.updateLayout() after adding the new items.

  5. #5
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default


    Hi, removing menu items and adding items to menu is working nicely without updateLayout() after adding the new items, if its in single view/place. But i am using this view as global in all other views by calling xtype of filter view. if i called filter view as a global that time it wont show updated value in the menu but in console the menu it contains newly added items. I did updateLayou() it is not affecting. Is it possible or not updating dynamic items to menu in global view level and how to achieve? . great appreciated. Thank you. If i used this view as in single place it will work very nicely.

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    You might extend menu and create your own menu class for the submenu. Then when the main menu is changed you can look for all menus of the custom type using Ext.ComponentQuery.query and do the removeAll() > add() on them.

  7. #7
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default


    Thank You. HelpFul