text: /**
   * {@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)
   *  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}
   * such as {@link Ext.Viewport#showMenu}, {@link Ext.Viewport#hideMenu}, {@link Ext.Viewport#toggleMenu}, {@link Ext.Viewport#hideOtherMenus},
   * or {@link Ext.Viewport#hideAllMenus}.
   *
   *      @example preview
   *      var menu = Ext.create('Ext.Menu', {
   *          items: [{
   *              text: 'Settings',
   *              iconCls: 'settings'
   *          }, {
   *              text: 'New Item',
   *              iconCls: 'compose'
   *          }, {
   *              text: 'Star',
   *              iconCls: 'star'
   *          }]
   *      });
   *
   *      Ext.Viewport.add({
   *          xtype: 'panel',
   *          html: 'Main View Content'
   *      });
   *
   *      Ext.Viewport.setMenu(menu, {
   *          side: 'left',
   *          // omitting the reveal config defaults the animation to 'cover'
   *          reveal: true
   *      });
   *
   *      Ext.Viewport.showMenu('left');
   *
   * The {@link #defaultType} of a Menu item is a {@link Ext.Button button}.
   */
  Ext.define('Ext.Menu', {
      extend: 'Ext.Sheet',
      xtype: 'menu',
      requires: ['Ext.Button'],
  
      /**
       * @cfg
       * @inheritdoc
       */
      baseCls: Ext.baseCSSPrefix + 'menu',
  
      /**
       * @cfg
       * @inheritdoc
       */
      left: 0,
  
      /**
       * @cfg
       * @inheritdoc
       */
      right: 0,
  
      /**
       * @cfg
       * @inheritdoc
       */
      bottom: 0,
  
      /**
       * @cfg
       * @inheritdoc
       */
      height: 'auto',
  
      /**
       * @cfg
       * @inheritdoc
       */
      width: 'auto',
  
      /**
       * @cfg
       * @inheritdoc
       */
      defaultType: 'button',
  
      /**
       * @hide
       */
      showAnimation: null,
  
      /**
       * @hide
       */
      hideAnimation: null,
  
      /**
       * @hide
       */
      centered: false,
  
      /**
       * @hide
       */
      modal: true,
  
      /**
       * @hide
       */
      hidden: true,
  
      /**
       * @hide
       */
      hideOnMaskTap: true,
  
      /**
       * @hide
       */
      translatable: {
          translationMethod: null
      },
  
      layout: {
          type: 'vbox',
          align: 'stretch'
      },
  
      floated: true,
  
      hide: function() {
          var me = this,
              parent = me.parent;
  
          if (parent && parent.isViewport && me.$side && !me.viewportIsHiding) {
              me.viewportIsHiding = true;
              parent.hideMenu(me.$side, true);
          } else {
              me.viewportIsHiding = false;
              me.callParent();
          }
      },
  
      constructor: function() {
          this.config.translatable.translationMethod = 'csstransform';
          this.callParent(arguments);
      },
  
      updateUi: function(newUi, oldUi) {
          this.callParent(arguments);
  
          if (newUi != oldUi && Ext.theme.is.Blackberry) {
              if (newUi == 'context') {
                  this.innerElement.swapCls('x-vertical', 'x-horizontal');
              }
              else if (newUi == 'application') {
                  this.innerElement.swapCls('x-horizontal', 'x-vertical');
              }
          }
      },
  
      updateHideOnMaskTap : function(hide) {
          if (!this.isFloated()) {
              var mask = this.getModal();
  
              if (mask) {
                  mask[hide ? 'on' : 'un']('tap', this.onMaskTap, this);
              }
          }
      },
  
      onMaskTap: function() {
          Ext.Viewport.hideMenu(this.$side);
      }
  });
  