title: Extjs Button click invokes menuitem by default
body: <p>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:</p>
  
  <ul>
  <li>stop showing the menu (I tried <code>event.stopEvent()</code> without success.)</li>
  <li>invoke the handler for one of the menu items.</li>
  </ul>
  
  <p>But you could still access the menu if you clicked the dropdown icon that appears next to the button.</p>
  
  <p>Fiddle <a href="http://jsfiddle.net/Litote0707/kNbTE/" rel="nofollow">here</a>.</p>
  
  <pre><code>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'); 
      }
  });
  </code></pre>