CODEWITHSUNDEEP
extjs4
Andrea
Andrea

Reputation: 1057

Extjs Button click invokes menuitem by default

One of the options for a menu is considered "typical". As in most people would click the first menu item. But there is a second option for those outside cases. Therefore, I would like a button menu that has a default option for those that do not want to have to click twice for the "typical" option. I was thinking that the handler for a button would:

But you could still access the menu if you clicked the dropdown icon that appears next to the button.

Fiddle here.

Ext.create('Ext.button.Button', {
    text: 'Pick One',
    menu: {
        items: [{
            text: 'Thing 1!',
            handler: function () {
                alert('foo');
            }
        }, {
            text: 'Thing 2!',
            handler: function () {
                alert('bar');
            }
        }]
    },
    handler: function (theButton, event) {
        //stop the menu from showing
        //event.stopEvent(); //try to stop showing menu, but no luck

        //invoke the handler for menu item 1
        //try to get at handler for menuitem programmatically
        //theButton.menu.items.getAt(0).??? 

        //i'd settle for hard-coding the function
        //alert('foo'); 
    }
});

Upvotes: 0

Views: 4450

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

In that case, you should use a split button:

http://docs.sencha.com/ext-js/4-2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#split-buttons

The menu will only show up when you click the arrow part. When you click the button part, it will fire the button handler and not show the menu.

Upvotes: 1

Related Questions