/ext-4.1.0_b3/src/menu/CheckItem.js

  1/**
  2 * A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
  3 *
  4 *     @example
  5 *     Ext.create('Ext.menu.Menu', {
  6 *         width: 100,
  7 *         height: 110,
  8 *         floating: false,  // usually you want this set to True (default)
  9 *         renderTo: Ext.getBody(),  // usually rendered by it's containing component
 10 *         items: [{
 11 *             xtype: 'menucheckitem',
 12 *             text: 'select all'
 13 *         },{
 14 *             xtype: 'menucheckitem',
 15 *             text: 'select specific',
 16 *         },{
 17 *             iconCls: 'add16',
 18 *             text: 'icon item'
 19 *         },{
 20 *             text: 'regular item'
 21 *         }]
 22 *     });
 23 */
 24Ext.define('Ext.menu.CheckItem', {
 25    extend: 'Ext.menu.Item',
 26    alias: 'widget.menucheckitem',
 27    
 28    /**
 29     * @cfg {Boolean} [checked=false]
 30     * True to render the menuitem initially checked.
 31     */
 32
 33    /**
 34     * @cfg {String} checkedCls
 35     * The CSS class used by {@link #cls} to show the checked state.
 36     * Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
 37     */
 38    checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
 39    /**
 40     * @cfg {String} uncheckedCls
 41     * The CSS class used by {@link #cls} to show the unchecked state.
 42     * Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
 43     */
 44    uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
 45    /**
 46     * @cfg {String} groupCls
 47     * The CSS class applied to this item's icon image to denote being a part of a radio group.
 48     * Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
 49     * Any specified {@link #iconCls} overrides this.
 50     */
 51    groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
 52
 53    /**
 54     * @cfg {Boolean} [hideOnClick=false]
 55     * Whether to not to hide the owning menu when this item is clicked.
 56     * Defaults to `false` for checkbox items, and to `true` for radio group items.
 57     */
 58    hideOnClick: false,
 59    
 60    /**
 61     * @cfg {Boolean} [checkChangeDisabled=false]
 62     * True to prevent the checked item from being toggled. Any submenu will still be accessible.
 63     */
 64    checkChangeDisabled: false,
 65
 66    afterRender: function() {
 67        var me = this;
 68        me.callParent();
 69        me.checked = !me.checked;
 70        me.setChecked(!me.checked, true);
 71        if (me.checkChangeDisabled) {
 72            me.disableCheckChange();
 73        }
 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            iconEl = me.iconEl;
117
118        if (iconEl) {
119            iconEl.addCls(me.disabledCls);
120        }
121        me.checkChangeDisabled = true;
122    },
123
124    /**
125     * Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
126     */
127    enableCheckChange: function() {
128        var me = this,
129            iconEl = me.iconEl;
130            
131        if (iconEl) {
132            iconEl.removeCls(me.disabledCls);
133        }
134        me.checkChangeDisabled = false;
135    },
136
137    onClick: function(e) {
138        var me = this;
139        if(!me.disabled && !me.checkChangeDisabled && !(me.checked && me.group)) {
140            me.setChecked(!me.checked);
141        }
142        this.callParent([e]);
143    },
144
145    onDestroy: function() {
146        Ext.menu.Manager.unregisterCheckable(this);
147        this.callParent(arguments);
148    },
149
150    /**
151     * Sets the checked state of the item
152     * @param {Boolean} checked True to check, false to uncheck
153     * @param {Boolean} [suppressEvents=false] True to prevent firing the checkchange events.
154     */
155    setChecked: function(checked, suppressEvents) {
156        var me = this;
157        if (me.checked !== checked && (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
158            if (me.el) {
159                me.el[checked  ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
160            }
161            me.checked = checked;
162            Ext.menu.Manager.onCheckChange(me, checked);
163            if (!suppressEvents) {
164                Ext.callback(me.checkHandler, me.scope, [me, checked]);
165                me.fireEvent('checkchange', me, checked);
166            }
167        }
168    }
169});