src/menu/CheckItem.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
  17  *
  18  *     @example
  19  *     Ext.create('Ext.menu.Menu', {
  20  *         width: 100,
  21  *         height: 110,
  22  *         floating: false,  // usually you want this set to True (default)
  23  *         renderTo: Ext.getBody(),  // usually rendered by it's containing component
  24  *         items: [{
  25  *             xtype: 'menucheckitem',
  26  *             text: 'select all'
  27  *         },{
  28  *             xtype: 'menucheckitem',
  29  *             text: 'select specific',
  30  *         },{
  31  *             iconCls: 'add16',
  32  *             text: 'icon item'
  33  *         },{
  34  *             text: 'regular item'
  35  *         }]
  36  *     });
  37  */
  38 Ext.define('Ext.menu.CheckItem', {
  39     extend: 'Ext.menu.Item',
  40     alias: 'widget.menucheckitem',
  41
  42     /**
  43      * @cfg {String} checkedCls
  44      * The CSS class used by {@link #cls} to show the checked state.
  45      * Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
  46      */
  47     checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
  48     /**
  49      * @cfg {String} uncheckedCls
  50      * The CSS class used by {@link #cls} to show the unchecked state.
  51      * Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
  52      */
  53     uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
  54     /**
  55      * @cfg {String} groupCls
  56      * The CSS class applied to this item's icon image to denote being a part of a radio group.
  57      * Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
  58      * Any specified {@link #iconCls} overrides this.
  59      */
  60     groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
  61
  62     /**
  63      * @cfg {Boolean} hideOnClick
  64      * Whether to not to hide the owning menu when this item is clicked.
  65      * Defaults to `false` for checkbox items, and to `true` for radio group items.
  66      */
  67     hideOnClick: false,
  68
  69     afterRender: function() {
  70         var me = this;
  71         this.callParent();
  72         me.checked = !me.checked;
  73         me.setChecked(!me.checked, true);
  74     },
  75
  76     initComponent: function() {
  77         var me = this;
  78         me.addEvents(
  79             /**
  80              * @event beforecheckchange
  81              * Fires before a change event. Return false to cancel.
  82              * @param {Ext.menu.CheckItem} this
  83              * @param {Boolean} checked
  84              */
  85             'beforecheckchange',
  86
  87             /**
  88              * @event checkchange
  89              * Fires after a change event.
  90              * @param {Ext.menu.CheckItem} this
  91              * @param {Boolean} checked
  92              */
  93             'checkchange'
  94         );
  95
  96         me.callParent(arguments);
  97
  98         Ext.menu.Manager.registerCheckable(me);
  99
 100         if (me.group) {
 101             if (!me.iconCls) {
 102                 me.iconCls = me.groupCls;
 103             }
 104             if (me.initialConfig.hideOnClick !== false) {
 105                 me.hideOnClick = true;
 106             }
 107         }
 108     },
 109
 110     /**
 111      * Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
 112      * will still be accessible
 113      */
 114     disableCheckChange: function() {
 115         var me = this;
 116
 117         if (me.iconEl) {
 118             me.iconEl.addCls(me.disabledCls);
 119         }
 120         me.checkChangeDisabled = true;
 121     },
 122
 123     /**
 124      * Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
 125      */
 126     enableCheckChange: function() {
 127         var me = this;
 128
 129         me.iconEl.removeCls(me.disabledCls);
 130         me.checkChangeDisabled = false;
 131     },
 132
 133     onClick: function(e) {
 134         var me = this;
 135         if(!me.disabled && !me.checkChangeDisabled && !(me.checked && me.group)) {
 136             me.setChecked(!me.checked);
 137         }
 138         this.callParent([e]);
 139     },
 140
 141     onDestroy: function() {
 142         Ext.menu.Manager.unregisterCheckable(this);
 143         this.callParent(arguments);
 144     },
 145
 146     /**
 147      * Sets the checked state of the item
 148      * @param {Boolean} checked True to check, false to uncheck
 149      * @param {Boolean} suppressEvents (optional) True to prevent firing the checkchange events. Defaults to `false`.
 150      */
 151     setChecked: function(checked, suppressEvents) {
 152         var me = this;
 153         if (me.checked !== checked && (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
 154             if (me.el) {
 155                 me.el[checked  ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
 156             }
 157             me.checked = checked;
 158             Ext.menu.Manager.onCheckChange(me, checked);
 159             if (!suppressEvents) {
 160                 Ext.callback(me.checkHandler, me.scope, [me, checked]);
 161                 me.fireEvent('checkchange', me, checked);
 162             }
 163         }
 164     }
 165 });
 166