Showing your SplitButton menu on the top level button press extjs4

I just finished updating an application that contained a lot of split buttons in the toolbar, which of course contained several menus where the user could select tasks. The problem is, when the original application was released I went with the standard extjs splitbutton functionality, and my users were used to the standard menus that they find in other applications.

There’s a difference, and if you want to know what it is just hover over the menu buttons on the browser that you are using to read this.  Chances are all you have to do is click anywhere on the buttons to show the menu, right? We’ll now take a look at the extjs splitButton, what you get is a small arrow that user has to press which toggles the menu between visible / invisible.

Why not change your split buttons to give the same functionality that users are already used to, and stop testing their nerves by making the target so small the slightest shake will mean they cannot see the menu.  Fortunately you can include the following listener to add a show / hide action to the main button click.


listeners:{

'click': function(me){

me.showMenu();

}

},

3 thoughts on “Showing your SplitButton menu on the top level button press extjs4

  1. Or, just use a menu instead of a split button. Split buttons have a default button action and then use the arrow to open a menu with secondary actions. If you don’t have a default button action, then a menu still shows the arrow on the button, but clicking the button does exactly what you did here, opens the menu. No extra code needed.

Leave a Reply