3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
19 * Ext.create('Ext.menu.Menu', {
22 * floating: false, // usually you want this set to True (default)
23 * renderTo: Ext.getBody(), // usually rendered by it's containing component
25 * xtype: 'menucheckitem',
28 * xtype: 'menucheckitem',
29 * text: 'select specific',
34 * text: 'regular item'
38 Ext.define('Ext.menu.CheckItem', {
39 extend: 'Ext.menu.Item',
40 alias: 'widget.menucheckitem',
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'`.
47 checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
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'`.
53 uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
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.
60 groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
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.
69 afterRender: function() {
72 me.checked = !me.checked;
73 me.setChecked(!me.checked, true);
76 initComponent: function() {
80 * @event beforecheckchange
81 * Fires before a change event. Return false to cancel.
82 * @param {Ext.menu.CheckItem} this
83 * @param {Boolean} checked
89 * Fires after a change event.
90 * @param {Ext.menu.CheckItem} this
91 * @param {Boolean} checked
96 me.callParent(arguments);
98 Ext.menu.Manager.registerCheckable(me);
102 me.iconCls = me.groupCls;
104 if (me.initialConfig.hideOnClick !== false) {
105 me.hideOnClick = true;
111 * Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
112 * will still be accessible
114 disableCheckChange: function() {
118 me.iconEl.addCls(me.disabledCls);
120 me.checkChangeDisabled = true;
124 * Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
126 enableCheckChange: function() {
129 me.iconEl.removeCls(me.disabledCls);
130 me.checkChangeDisabled = false;
133 onClick: function(e) {
135 if(!me.disabled && !me.checkChangeDisabled && !(me.checked && me.group)) {
136 me.setChecked(!me.checked);
138 this.callParent([e]);
141 onDestroy: function() {
142 Ext.menu.Manager.unregisterCheckable(this);
143 this.callParent(arguments);
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`.
151 setChecked: function(checked, suppressEvents) {
153 if (me.checked !== checked && (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
155 me.el[checked ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
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);