X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/CheckItem.html diff --git a/docs/source/CheckItem.html b/docs/source/CheckItem.html index 78905abb..4838e0b1 100644 --- a/docs/source/CheckItem.html +++ b/docs/source/CheckItem.html @@ -1,126 +1,164 @@ - - - - The source code - - - - -
/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-
/** - * @class Ext.menu.CheckItem +Sencha Documentation Project
/**
+ * @class Ext.menu.CheckItem
  * @extends Ext.menu.Item
- * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
- * @constructor
- * Creates a new CheckItem
- * @param {Object} config Configuration options
+
+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'
+		}]
+	}); 
+	
  * @xtype menucheckitem
+ * @markdown
+ * @constructor
+ * @param {Object} config The config object
  */
-Ext.menu.CheckItem = Ext.extend(Ext.menu.Item, {
-    
/** - * @cfg {String} group - * All check items with the same group name will automatically be grouped into a single-select - * radio button group (defaults to '') + +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 */ -
/** - * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item") + 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 */ - itemCls : "x-menu-item x-menu-check-item", -
/** - * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item") + 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 */ - groupClass : "x-menu-group-item", + groupCls: Ext.baseCSSPrefix + 'menu-group-icon', -
/** - * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false). Note that - * if this checkbox is part of a radio group (group = true) only the last item in the group that is - * initialized with checked = true will be rendered as checked. + /** + * @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 */ - checked: false, - - // private - ctype: "Ext.menu.CheckItem", - - initComponent : function(){ - Ext.menu.CheckItem.superclass.initComponent.call(this); - this.addEvents( -
/** - * @event beforecheckchange - * Fires before the checked value is set, providing an opportunity to cancel if needed - * @param {Ext.menu.CheckItem} this - * @param {Boolean} checked The new checked value that will be set - */ - "beforecheckchange" , -
/** - * @event checkchange - * Fires after the checked value has been set - * @param {Ext.menu.CheckItem} this - * @param {Boolean} checked The checked value that was set - */ - "checkchange" - ); -
/** - * A function that handles the checkchange event. The function is undefined by default, but if an implementation - * is provided, it will be called automatically when the checkchange event fires. - * @param {Ext.menu.CheckItem} this - * @param {Boolean} checked The checked value that was set - * @method checkHandler - */ - if(this.checkHandler){ - this.on('checkchange', this.checkHandler, this.scope); - } - Ext.menu.MenuMgr.registerCheckable(this); + hideOnClick: false, + + afterRender: function() { + var me = this; + this.callParent(); + me.checked = !me.checked; + me.setChecked(!me.checked, true); }, - // private - onRender : function(c){ - Ext.menu.CheckItem.superclass.onRender.apply(this, arguments); - if(this.group){ - this.el.addClass(this.groupClass); + 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; + } } - if(this.checked){ - this.checked = false; - this.setChecked(true, 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; + + 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]); }, - // private - destroy : function(){ - Ext.menu.MenuMgr.unregisterCheckable(this); - Ext.menu.CheckItem.superclass.destroy.apply(this, arguments); + onDestroy: function() { + Ext.menu.Manager.unregisterCheckable(this); + this.callParent(arguments); }, -
/** - * Set the checked state of this item - * @param {Boolean} checked The new checked value - * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false) + /** + * 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(state, suppressEvent){ - var suppress = suppressEvent === true; - if(this.checked != state && (suppress || this.fireEvent("beforecheckchange", this, state) !== false)){ - if(this.container){ - this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked"); + 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); } - this.checked = state; - if(!suppress){ - this.fireEvent("checkchange", this, state); + me.checked = checked; + Ext.menu.Manager.onCheckChange(me, checked); + if (!suppressEvents) { + Ext.callback(me.checkHandler, me.scope, [me, checked]); + me.fireEvent('checkchange', me, checked); } } - }, - - // private - handleClick : function(e){ - if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item - this.setChecked(!this.checked); - } - Ext.menu.CheckItem.superclass.handleClick.apply(this, arguments); } }); -Ext.reg('menucheckitem', Ext.menu.CheckItem);
- - \ No newline at end of file +
\ No newline at end of file