Show menu items when click on any item

Question

Extjs Menu hide when clicked on any item. I want to show menu even when someone click on menu Item.

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1nfo

Ext.create('Ext.button.Button', {
text:'menu open',
id: 'todostatusFilter',
renderTo:Ext.getBody(),
menu: {
    xtype: 'menu',
    id: 'todostatusFilterMenu',
    items: [{
        text: 'All',
        action: 'All',
        checked: true,
        group: 'todoSortByStatus'
    },{
        text: 'incomplete',
        action: 'Incomplete',
        checked: false,
        group: 'todoSortByStatus'
    }, {
        text: 'Complete',
        action: 'Complete',
        checked: false,
        group: 'todoSortByStatus'
    }]
}
});

Answer 1

You can try this - add enableToggle: true to the button, and add a listener on beforehide of the menu like:

button = Ext.create('Ext.button.Button', {
    text: 'menu open',
    id: 'todostatusFilter',
    renderTo: Ext.getBody(),
    enableToggle: true,
    menu: {
        xtype: 'menu',
        id: 'todostatusFilterMenu',
        listeners: {
            beforehide: function () {
                return !button.pressed;
            }
        },
        items: [{
            text: 'All',
            action: 'All',
            checked: true,
            group: 'todoSortByStatus'
        }, {
            text: 'incomplete',
            action: 'Incomplete',
            checked: false,
            group: 'todoSortByStatus'
        }, {
            text: 'Complete',
            action: 'Complete',
            checked: false,
            group: 'todoSortByStatus'
        }]
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/1nfp