src/widgets/menu/CheckItem.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.menu.CheckItem
   9  * @extends Ext.menu.Item
  10  * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
  11  * @constructor
  12  * Creates a new CheckItem
  13  * @param {Object} config Configuration options
  14  * @xtype menucheckitem
  15  */
  16 Ext.menu.CheckItem = function(config){
  17     Ext.menu.CheckItem.superclass.constructor.call(this, config);
  18     this.addEvents(
  19         /**
  20          * @event beforecheckchange
  21          * Fires before the checked value is set, providing an opportunity to cancel if needed
  22          * @param {Ext.menu.CheckItem} this
  23          * @param {Boolean} checked The new checked value that will be set
  24          */
  25         "beforecheckchange" ,
  26         /**
  27          * @event checkchange
  28          * Fires after the checked value has been set
  29          * @param {Ext.menu.CheckItem} this
  30          * @param {Boolean} checked The checked value that was set
  31          */
  32         "checkchange"
  33     );
  34     /**
  35      * A function that handles the checkchange event.  The function is undefined by default, but if an implementation
  36      * is provided, it will be called automatically when the checkchange event fires.
  37      * @param {Ext.menu.CheckItem} this
  38      * @param {Boolean} checked The checked value that was set
  39      * @method checkHandler
  40      */
  41     if(this.checkHandler){
  42         this.on('checkchange', this.checkHandler, this.scope);
  43     }
  44     Ext.menu.MenuMgr.registerCheckable(this);
  45 };
  46 Ext.extend(Ext.menu.CheckItem, Ext.menu.Item, {
  47     /**
  48      * @cfg {String} group
  49      * All check items with the same group name will automatically be grouped into a single-select
  50      * radio button group (defaults to '')
  51      */
  52     /**
  53      * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
  54      */
  55     itemCls : "x-menu-item x-menu-check-item",
  56     /**
  57      * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
  58      */
  59     groupClass : "x-menu-group-item",
  60
  61     /**
  62      * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
  63      * if this checkbox is part of a radio group (group = true) only the last item in the group that is
  64      * initialized with checked = true will be rendered as checked.
  65      */
  66     checked: false,
  67
  68     // private
  69     ctype: "Ext.menu.CheckItem",
  70
  71     // private
  72     onRender : function(c){
  73         Ext.menu.CheckItem.superclass.onRender.apply(this, arguments);
  74         if(this.group){
  75             this.el.addClass(this.groupClass);
  76         }
  77         if(this.checked){
  78             this.checked = false;
  79             this.setChecked(true, true);
  80         }
  81     },
  82
  83     // private
  84     destroy : function(){
  85         Ext.menu.MenuMgr.unregisterCheckable(this);
  86         Ext.menu.CheckItem.superclass.destroy.apply(this, arguments);
  87     },
  88
  89     /**
  90      * Set the checked state of this item
  91      * @param {Boolean} checked The new checked value
  92      * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
  93      */
  94     setChecked : function(state, suppressEvent){
  95         if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
  96             if(this.container){
  97                 this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
  98             }
  99             this.checked = state;
 100             if(suppressEvent !== true){
 101                 this.fireEvent("checkchange", this, state);
 102             }
 103         }
 104     },
 105
 106     // private
 107     handleClick : function(e){
 108        if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
 109            this.setChecked(!this.checked);
 110        }
 111        Ext.menu.CheckItem.superclass.handleClick.apply(this, arguments);
 112     }
 113 });
 114 Ext.reg('menucheckitem', Ext.menu.CheckItem);