EXT js Button menu item disable

Question

I have a extjs button "Order" with menu items 'orderInsuranceMenu' for the button. I need to hide the menu items depeniding on some condition. How can i achive it

orderInsuranceMenu = {
    id: 'menu-order-insurance'
    ,items: [
          { 
            id:'btnMenu1',
            text: 'Test Buton1',
            iconCls: 'icon-cls',
            listeners: {
                click: function(b,e){  
                   //some code goes here
                }
            }
        }
        ,{
            id:'btnMenu2',
            text: 'Test Buton2',
            iconCls: 'icon-first-title',
            listeners: {
                click: function(b,e){  
                    //Some code here
                }
            }
        }

    ]
};



Order = new Ext.Button({
    text: 'Order&#160;'
    , iconCls: 'icon-go'
    , disabled: true
    , menu: orderInsuranceMenu
    , handler: function() {
    }

});

I have tried this code but it doesnt work:

Ext.getCmp('btnMenu2').hide();

Torbjörn Hansson Torbjörn Hansson · Accepted Answer · 2011-06-13T14:35:55

You can achieve this with the method setDisabled for the button. I.e:

Ext.getCmp('btnMenu2').setDisabled(true);

If you want to apply this for all items in your menu you can do this:

Ext.getCmp('menu-order-insurance').items.each(function(item) {
    if (item.isXType('button')) {
        item.setDisabled(true); // your condition here
    }
});

EXT js Button menu item disable

3 Answers