Item.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:7k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.menu.Item
  3.  * @extends Ext.menu.BaseItem
  4.  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
  5.  * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
  6.  * activation and click handling.
  7.  * @constructor
  8.  * Creates a new Item
  9.  * @param {Object} config Configuration options
  10.  * @xtype menuitem
  11.  */
  12. Ext.menu.Item = function(config){
  13.     Ext.menu.Item.superclass.constructor.call(this, config);
  14.     if(this.menu){
  15.         this.menu = Ext.menu.MenuMgr.get(this.menu);
  16.     }
  17. };
  18. Ext.extend(Ext.menu.Item, Ext.menu.BaseItem, {
  19.     /**
  20.      * @property menu
  21.      * @type Ext.menu.Menu
  22.      * The submenu associated with this Item if one was configured.
  23.      */
  24.     /**
  25.      * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
  26.      * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
  27.      */
  28.     /**
  29.      * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If
  30.      * icon is specified {@link #iconCls} should not be.
  31.      */
  32.     /**
  33.      * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
  34.      * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.
  35.      */
  36.     /**
  37.      * @cfg {String} text The text to display in this item (defaults to '').
  38.      */
  39.     /**
  40.      * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
  41.      */
  42.     /**
  43.      * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
  44.      */
  45.     /**
  46.      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
  47.      */
  48.     itemCls : 'x-menu-item',
  49.     /**
  50.      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
  51.      */
  52.     canActivate : true,
  53.     /**
  54.      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
  55.      */
  56.     showDelay: 200,
  57.     // doc'd in BaseItem
  58.     hideDelay: 200,
  59.     // private
  60.     ctype: 'Ext.menu.Item',
  61.     // private
  62.     onRender : function(container, position){
  63.         if (!this.itemTpl) {
  64.             this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
  65.                 '<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',
  66.                     '<tpl if="hrefTarget">',
  67.                         ' target="{hrefTarget}"',
  68.                     '</tpl>',
  69.                  '>',
  70.                      '<img src="{icon}" class="x-menu-item-icon {iconCls}"/>',
  71.                      '<span class="x-menu-item-text">{text}</span>',
  72.                  '</a>'
  73.              );
  74.         }
  75.         var a = this.getTemplateArgs();
  76.         this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
  77.         this.iconEl = this.el.child('img.x-menu-item-icon');
  78.         this.textEl = this.el.child('.x-menu-item-text');
  79.         Ext.menu.Item.superclass.onRender.call(this, container, position);
  80.     },
  81.     getTemplateArgs: function() {
  82.         return {
  83.             id: this.id,
  84.             cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),
  85.             href: this.href || '#',
  86.             hrefTarget: this.hrefTarget,
  87.             icon: this.icon || Ext.BLANK_IMAGE_URL,
  88.             iconCls: this.iconCls || '',
  89.             text: this.itemText||this.text||'&#160;'
  90.         };
  91.     },
  92.     /**
  93.      * Sets the text to display in this menu item
  94.      * @param {String} text The text to display
  95.      */
  96.     setText : function(text){
  97.         this.text = text||'&#160;';
  98.         if(this.rendered){
  99.             this.textEl.update(this.text);
  100.             this.parentMenu.layout.doAutoSize();
  101.         }
  102.     },
  103.     /**
  104.      * Sets the CSS class to apply to the item's icon element
  105.      * @param {String} cls The CSS class to apply
  106.      */
  107.     setIconClass : function(cls){
  108.         var oldCls = this.iconCls;
  109.         this.iconCls = cls;
  110.         if(this.rendered){
  111.             this.iconEl.replaceClass(oldCls, this.iconCls);
  112.         }
  113.     },
  114.     
  115.     //private
  116.     beforeDestroy: function(){
  117.         if (this.menu){
  118.             this.menu.destroy();
  119.         }
  120.         Ext.menu.Item.superclass.beforeDestroy.call(this);
  121.     },
  122.     // private
  123.     handleClick : function(e){
  124.         if(!this.href){ // if no link defined, stop the event automatically
  125.             e.stopEvent();
  126.         }
  127.         Ext.menu.Item.superclass.handleClick.apply(this, arguments);
  128.     },
  129.     // private
  130.     activate : function(autoExpand){
  131.         if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
  132.             this.focus();
  133.             if(autoExpand){
  134.                 this.expandMenu();
  135.             }
  136.         }
  137.         return true;
  138.     },
  139.     // private
  140.     shouldDeactivate : function(e){
  141.         if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
  142.             if(this.menu && this.menu.isVisible()){
  143.                 return !this.menu.getEl().getRegion().contains(e.getPoint());
  144.             }
  145.             return true;
  146.         }
  147.         return false;
  148.     },
  149.     // private
  150.     deactivate : function(){
  151.         Ext.menu.Item.superclass.deactivate.apply(this, arguments);
  152.         this.hideMenu();
  153.     },
  154.     // private
  155.     expandMenu : function(autoActivate){
  156.         if(!this.disabled && this.menu){
  157.             clearTimeout(this.hideTimer);
  158.             delete this.hideTimer;
  159.             if(!this.menu.isVisible() && !this.showTimer){
  160.                 this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
  161.             }else if (this.menu.isVisible() && autoActivate){
  162.                 this.menu.tryActivate(0, 1);
  163.             }
  164.         }
  165.     },
  166.     // private
  167.     deferExpand : function(autoActivate){
  168.         delete this.showTimer;
  169.         this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
  170.         if(autoActivate){
  171.             this.menu.tryActivate(0, 1);
  172.         }
  173.     },
  174.     // private
  175.     hideMenu : function(){
  176.         clearTimeout(this.showTimer);
  177.         delete this.showTimer;
  178.         if(!this.hideTimer && this.menu && this.menu.isVisible()){
  179.             this.hideTimer = this.deferHide.defer(this.hideDelay, this);
  180.         }
  181.     },
  182.     // private
  183.     deferHide : function(){
  184.         delete this.hideTimer;
  185.         if(this.menu.over){
  186.             this.parentMenu.setActiveItem(this, false);
  187.         }else{
  188.             this.menu.hide();
  189.         }
  190.     }
  191. });
  192. Ext.reg('menuitem', Ext.menu.Item);