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 * @class Ext.menu.CheckItem
17 * @extends Ext.menu.Item
19 * A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
21 * {@img Ext.menu.CheckItem/Ext.menu.CheckItem.png Ext.menu.CheckItem component}
25 * Ext.create('Ext.menu.Menu', {
28 * floating: false, // usually you want this set to True (default)
29 * renderTo: Ext.getBody(), // usually rendered by it's containing component
31 * xtype: 'menucheckitem',
34 * xtype: 'menucheckitem',
35 * text: 'select specific',
40 * text: 'regular item'
45 Ext.define('Ext.menu.CheckItem', {
46 extend: 'Ext.menu.Item',
47 alias: 'widget.menucheckitem',
50 * @cfg {String} checkedCls
51 * The CSS class used by {@link #cls} to show the checked state.
52 * Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
55 checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
57 * @cfg {String} uncheckedCls
58 * The CSS class used by {@link #cls} to show the unchecked state.
59 * Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
62 uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
64 * @cfg {String} groupCls
65 * The CSS class applied to this item's icon image to denote being a part of a radio group.
66 * Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
67 * Any specified {@link #iconCls} overrides this.
70 groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
73 * @cfg {Boolean} hideOnClick
74 * Whether to not to hide the owning menu when this item is clicked.
75 * Defaults to `false` for checkbox items, and to `true` for radio group items.
80 afterRender: function() {
83 me.checked = !me.checked;
84 me.setChecked(!me.checked, true);
87 initComponent: function() {
91 * @event beforecheckchange
92 * Fires before a change event. Return false to cancel.
93 * @param {Ext.menu.CheckItem} this
94 * @param {Boolean} checked
100 * Fires after a change event.
101 * @param {Ext.menu.CheckItem} this
102 * @param {Boolean} checked
107 me.callParent(arguments);
109 Ext.menu.Manager.registerCheckable(me);
113 me.iconCls = me.groupCls;
115 if (me.initialConfig.hideOnClick !== false) {
116 me.hideOnClick = true;
122 * Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
123 * will still be accessible
125 disableCheckChange: function() {
129 me.iconEl.addCls(me.disabledCls);
131 me.checkChangeDisabled = true;
135 * Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
137 enableCheckChange: function() {
140 me.iconEl.removeCls(me.disabledCls);
141 me.checkChangeDisabled = false;
144 onClick: function(e) {
146 if(!me.disabled && !me.checkChangeDisabled && !(me.checked && me.group)) {
147 me.setChecked(!me.checked);
149 this.callParent([e]);
152 onDestroy: function() {
153 Ext.menu.Manager.unregisterCheckable(this);
154 this.callParent(arguments);
158 * Sets the checked state of the item
159 * @param {Boolean} checked True to check, false to uncheck
160 * @param {Boolean} suppressEvents (optional) True to prevent firing the checkchange events. Defaults to `false`.
163 setChecked: function(checked, suppressEvents) {
165 if (me.checked !== checked && (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
167 me.el[checked ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
169 me.checked = checked;
170 Ext.menu.Manager.onCheckChange(me, checked);
171 if (!suppressEvents) {
172 Ext.callback(me.checkHandler, me.scope, [me, checked]);
173 me.fireEvent('checkchange', me, checked);