* @class Ext.menu.CheckItem
* @extends Ext.menu.Item
*
* A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
*
* {@img Ext.menu.CheckItem/Ext.menu.CheckItem.png Ext.menu.CheckItem component}
*
* __Example Usage__
*
* Ext.create('Ext.menu.Menu', {
* width: 100,
* height: 110,
* floating: false, // usually you want this set to True (default)
* renderTo: Ext.getBody(), // usually rendered by it's containing component
* items: [{
* xtype: 'menucheckitem',
* text: 'select all'
* },{
* xtype: 'menucheckitem',
* text: 'select specific',
* },{
* iconCls: 'add16',
* text: 'icon item'
* },{
* text: 'regular item'
* }]
* });
*
*/
Ext.define('Ext.menu.CheckItem', {
extend: 'Ext.menu.Item',
alias: 'widget.menucheckitem',
* @cfg {String} checkedCls
* The CSS class used by {@link #cls} to show the checked state.
* Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
* @markdown
*/
checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
* @cfg {String} uncheckedCls
* The CSS class used by {@link #cls} to show the unchecked state.
* Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
* @markdown
*/
uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
* @cfg {String} groupCls
* The CSS class applied to this item's icon image to denote being a part of a radio group.
* Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
* Any specified {@link #iconCls} overrides this.
* @markdown
*/
groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
* @cfg {Boolean} hideOnClick
* Whether to not to hide the owning menu when this item is clicked.
* Defaults to `false` for checkbox items, and to `true` for radio group items.
* @markdown
*/
hideOnClick: false,
afterRender: function() {
var me = this;
this.callParent();
me.checked = !me.checked;
me.setChecked(!me.checked, true);
},
initComponent: function() {
var me = this;
me.addEvents(
* @event beforecheckchange
* Fires before a change event. Return false to cancel.
* @param {Ext.menu.CheckItem} this
* @param {Boolean} checked
*/
'beforecheckchange',
* @event checkchange
* Fires after a change event.
* @param {Ext.menu.CheckItem} this
* @param {Boolean} checked
*/
'checkchange'
);
me.callParent(arguments);
Ext.menu.Manager.registerCheckable(me);
if (me.group) {
if (!me.iconCls) {
me.iconCls = me.groupCls;
}
if (me.initialConfig.hideOnClick !== false) {
me.hideOnClick = true;
}
}
},
* Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
* will still be accessible
*/
disableCheckChange: function() {
var me = this;
if (me.iconEl) {
me.iconEl.addCls(me.disabledCls);
}
me.checkChangeDisabled = true;
},
* Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
*/
enableCheckChange: function() {
var me = this;
me.iconEl.removeCls(me.disabledCls);
me.checkChangeDisabled = false;
},
onClick: function(e) {
var me = this;
if(!me.disabled && !me.checkChangeDisabled && !(me.checked && me.group)) {
me.setChecked(!me.checked);
}
this.callParent([e]);
},
onDestroy: function() {
Ext.menu.Manager.unregisterCheckable(this);
this.callParent(arguments);
},
* Sets the checked state of the item
* @param {Boolean} checked True to check, false to uncheck
* @param {Boolean} suppressEvents (optional) True to prevent firing the checkchange events. Defaults to `false`.
* @markdown
*/
setChecked: function(checked, suppressEvents) {
var me = this;
if (me.checked !== checked && (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
if (me.el) {
me.el[checked ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
}
me.checked = checked;
Ext.menu.Manager.onCheckChange(me, checked);
if (!suppressEvents) {
Ext.callback(me.checkHandler, me.scope, [me, checked]);
me.fireEvent('checkchange', me, checked);
}
}
}
});