src/src/Menu.js

   1 /**
   2  * {@link Ext.Menu}'s are used with {@link Ext.Viewport#setMenu}. A menu can be linked with any side of the screen (top, left, bottom or right)
   3  *  and will simply describe the contents of your menu. To use this menu you will call various menu related functions on the {@link Ext.Viewport}
   4  * such as {@link Ext.Viewport#showMenu}, {@link Ext.Viewport#hideMenu}, {@link Ext.Viewport#toggleMenu}, {@link Ext.Viewport#hideOtherMenus},
   5  * or {@link Ext.Viewport#hideAllMenus}.
   6  *
   7  *      @example preview
   8  *      var menu = Ext.create('Ext.Menu', {
   9  *          items: [
  10  *              {
  11  *                  text: 'Settings',
  12  *                  iconCls: 'settings'
  13  *              },
  14  *              {
  15  *                  text: 'New Item',
  16  *                  iconCls: 'compose'
  17  *              },
  18  *              {
  19  *                  text: 'Star',
  20  *                  iconCls: 'star'
  21  *              }
  22  *          ]
  23  *      });
  24  *
  25  *      Ext.Viewport.setMenu(menu, {
  26  *          side: 'left',
  27  *          reveal: true
  28  *      });
  29  *
  30  *      Ext.Viewport.showMenu('left');
  31  *
  32  * The {@link #defaultType} of a Menu item is a {@link Ext.Button button}.
  33  */
  34 Ext.define('Ext.Menu', {
  35     extend: 'Ext.Sheet',
  36     xtype: 'menu',
  37     requires: ['Ext.Button'],
  38
  39     config: {
  40         /**
  41          * @cfg
  42          * @inheritdoc
  43          */
  44         baseCls: Ext.baseCSSPrefix + 'menu',
  45
  46         /**
  47          * @cfg
  48          * @inheritdoc
  49          */
  50         left: 0,
  51
  52         /**
  53          * @cfg
  54          * @inheritdoc
  55          */
  56         right: 0,
  57
  58         /**
  59          * @cfg
  60          * @inheritdoc
  61          */
  62         bottom: 0,
  63
  64         /**
  65          * @cfg
  66          * @inheritdoc
  67          */
  68         height: 'auto',
  69
  70         /**
  71          * @cfg
  72          * @inheritdoc
  73          */
  74         width: 'auto',
  75
  76         /**
  77          * @cfg
  78          * @inheritdoc
  79          */
  80         defaultType: 'button',
  81
  82         /**
  83          * @hide
  84          */
  85         showAnimation: null,
  86
  87         /**
  88          * @hide
  89          */
  90         hideAnimation: null,
  91
  92         /**
  93          * @hide
  94          */
  95         centered: false,
  96
  97         /**
  98          * @hide
  99          */
 100         modal: true,
 101
 102         /**
 103          * @hide
 104          */
 105         hidden: true,
 106
 107         /**
 108          * @hide
 109          */
 110         hideOnMaskTap: true,
 111
 112         /**
 113          * @hide
 114          */
 115         translatable: {
 116             translationMethod: null
 117         }
 118     },
 119
 120     constructor: function() {
 121         this.config.translatable.translationMethod = Ext.browser.is.AndroidStock2 ? 'cssposition' : 'csstransform';
 122         this.callParent(arguments);
 123     },
 124
 125     platformConfig: [{
 126         theme: ['Windows']
 127     }, {
 128         theme: ['Blackberry', 'Blackberry103'],
 129         ui: 'context',
 130         layout: {
 131             pack: 'center'
 132         }
 133     }],
 134
 135     updateUi: function(newUi, oldUi) {
 136         this.callParent(arguments);
 137
 138         if (newUi != oldUi && (Ext.theme.is.Blackberry || Ext.theme.is.Blackberry103)) {
 139             if (newUi == 'context') {
 140                 this.innerElement.swapCls('x-vertical', 'x-horizontal');
 141             }
 142             else if (newUi == 'application') {
 143                 this.innerElement.swapCls('x-horizontal', 'x-vertical');
 144             }
 145         }
 146     },
 147
 148     updateHideOnMaskTap : function(hide) {
 149         var mask = this.getModal();
 150
 151         if (mask) {
 152             mask[hide ? 'on' : 'un'].call(mask, 'tap', function() {
 153                 Ext.Viewport.hideMenu(this.$side);
 154             }, this);
 155         }
 156     },
 157
 158     /**
 159      * Only fire the hide event if it is initialized
 160      */
 161     doSetHidden: function() {
 162         if (this.initialized) {
 163             this.callParent(arguments);
 164         }
 165     }
 166 });