extjs/modern/theme-blackberry/src/ux/TabMenuButton.js

   1 /**
   2  * User extension designed to be used on the BB10 platform.
   3  *
   4  * This component is used to recreate the Tab Menu component of the BB10 SDK. To recreate a native BB10 experience, it is
   5  * advised to insert this component into a {@link Ext.Toolbar} and have it aligned to the left edge.
   6  *
   7  *     // Used within a toolbar
   8  *     {
   9  *         xtype: 'toolbar',
  10  *         items: [{
  11  *             xclass: 'Ext.theme.blackberry.TabMenuButton',
  12  *             text: 'Chats',
  13  *             iconCls: 'chats',
  14  *             menuItems: [{
  15  *                 text: 'Chats',
  16  *                 iconCls: 'chats',
  17  *                 handler: function() {
  18  *                     // do something
  19  *                 }
  20  *             }, {
  21  *                 text: 'Contacts',
  22  *                 iconCls: 'contacts',
  23  *                 handler: function() {
  24  *                     // do something
  25  *                 }
  26  *             }]
  27  *         }]
  28  *     }
  29  */
  30 Ext.define('Ext.theme.blackberry.TabMenuButton', {
  31     extend: 'Ext.theme.blackberry.MenuButton',
  32
  33     config: {
  34         /**
  35          * @hide
  36          */
  37         ui: 'tab',
  38
  39         /**
  40          * @hide
  41          */
  42         cls: 'tabmenu',
  43
  44         /**
  45          * The items to be used within the {@link Ext.Menu} which is shown when this button is tapped.
  46          *
  47          *     // Used within a toolbar
  48          *     {
  49          *         xtype: 'toolbar',
  50          *         items: [{
  51          *             xclass: 'Ext.theme.blackberry.TabMenuButton',
  52          *             text: 'Chats',
  53          *             iconCls: 'chats',
  54          *             menuItems: [{
  55          *                 text: 'Chats',
  56          *                 iconCls: 'chats',
  57          *                 handler: function() {
  58          *                     // do something
  59          *                 }
  60          *             }, {
  61          *                 text: 'Contacts',
  62          *                 iconCls: 'contacts',
  63          *                 handler: function() {
  64          *                     // do something
  65          *                 }
  66          *             }]
  67          *         }]
  68          *     }
  69          *
  70          * @type {}
  71          */
  72         menuItems: [],
  73
  74         /**
  75          * @hide
  76          */
  77         menuSide: 'left'
  78     },
  79
  80     onMenuButtonTap: function(button) {
  81         if (button) {
  82             this.setText(button.getText());
  83             this.setIconCls(button.getIconCls());
  84         }
  85
  86         Ext.Viewport.hideMenu(this.getMenuSide());
  87     }
  88 });