docs/source/CheckItem.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-menu-CheckItem-method-constructor'><span id='Ext-menu-CheckItem'>/**
  19 </span></span> * @class Ext.menu.CheckItem
  20  * @extends Ext.menu.Item
  21
  22 A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
  23 {@img Ext.menu.CheckItem/Ext.menu.CheckItem.png Ext.menu.CheckItem component}
  24 __Example Usage__
  25     Ext.create('Ext.menu.Menu', {
  26                 width: 100,
  27                 height: 110,
  28                 floating: false,  // usually you want this set to True (default)
  29                 renderTo: Ext.getBody(),  // usually rendered by it's containing component
  30                 items: [{
  31                     xtype: 'menucheckitem',
  32                     text: 'select all'
  33                 },{
  34                     xtype: 'menucheckitem',
  35                         text: 'select specific',
  36                 },{
  37             iconCls: 'add16',
  38                     text: 'icon item'
  39                 },{
  40                     text: 'regular item'
  41                 }]
  42         });
  43
  44  * @xtype menucheckitem
  45  * @markdown
  46  * @constructor
  47  * @param {Object} config The config object
  48  */
  49
  50 Ext.define('Ext.menu.CheckItem', {
  51     extend: 'Ext.menu.Item',
  52     alias: 'widget.menucheckitem',
  53
  54 <span id='Ext-menu-CheckItem-cfg-checkedCls'>    /**
  55 </span>     * @cfg {String} checkedCls
  56      * The CSS class used by {@link #cls} to show the checked state.
  57      * Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
  58      * @markdown
  59      */
  60     checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
  61 <span id='Ext-menu-CheckItem-cfg-uncheckedCls'>    /**
  62 </span>     * @cfg {String} uncheckedCls
  63      * The CSS class used by {@link #cls} to show the unchecked state.
  64      * Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
  65      * @markdown
  66      */
  67     uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
  68 <span id='Ext-menu-CheckItem-cfg-groupCls'>    /**
  69 </span>     * @cfg {String} groupCls
  70      * The CSS class applied to this item's icon image to denote being a part of a radio group.
  71      * Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
  72      * Any specified {@link #iconCls} overrides this.
  73      * @markdown
  74      */
  75     groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
  76
  77 <span id='Ext-menu-CheckItem-cfg-hideOnClick'>    /**
  78 </span>     * @cfg {Boolean} hideOnClick
  79      * Whether to not to hide the owning menu when this item is clicked.
  80      * Defaults to `false` for checkbox items, and to `true` for radio group items.
  81      * @markdown
  82      */
  83     hideOnClick: false,
  84
  85     afterRender: function() {
  86         var me = this;
  87         this.callParent();
  88         me.checked = !me.checked;
  89         me.setChecked(!me.checked, true);
  90     },
  91
  92     initComponent: function() {
  93         var me = this;
  94         me.addEvents(
  95 <span id='Ext-menu-CheckItem-event-beforecheckchange'>            /**
  96 </span>             * @event beforecheckchange
  97              * Fires before a change event. Return false to cancel.
  98              * @param {Ext.menu.CheckItem} this
  99              * @param {Boolean} checked
 100              */
 101             'beforecheckchange',
 102
 103 <span id='Ext-menu-CheckItem-event-checkchange'>            /**
 104 </span>             * @event checkchange
 105              * Fires after a change event.
 106              * @param {Ext.menu.CheckItem} this
 107              * @param {Boolean} checked
 108              */
 109             'checkchange'
 110         );
 111
 112         me.callParent(arguments);
 113
 114         Ext.menu.Manager.registerCheckable(me);
 115
 116         if (me.group) {
 117             if (!me.iconCls) {
 118                 me.iconCls = me.groupCls;
 119             }
 120             if (me.initialConfig.hideOnClick !== false) {
 121                 me.hideOnClick = true;
 122             }
 123         }
 124     },
 125
 126 <span id='Ext-menu-CheckItem-method-disableCheckChange'>    /**
 127 </span>     * Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
 128      * will still be accessible
 129      */
 130     disableCheckChange: function() {
 131         var me = this;
 132
 133         me.iconEl.addCls(me.disabledCls);
 134         me.checkChangeDisabled = true;
 135     },
 136
 137 <span id='Ext-menu-CheckItem-method-enableCheckChange'>    /**
 138 </span>     * Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
 139      */
 140     enableCheckChange: function() {
 141         var me = this;
 142
 143         me.iconEl.removeCls(me.disabledCls);
 144         me.checkChangeDisabled = false;
 145     },
 146
 147     onClick: function(e) {
 148         var me = this;
 149         if(!me.disabled &amp;&amp; !me.checkChangeDisabled &amp;&amp; !(me.checked &amp;&amp; me.group)) {
 150             me.setChecked(!me.checked);
 151         }
 152         this.callParent([e]);
 153     },
 154
 155     onDestroy: function() {
 156         Ext.menu.Manager.unregisterCheckable(this);
 157         this.callParent(arguments);
 158     },
 159
 160 <span id='Ext-menu-CheckItem-method-setChecked'>    /**
 161 </span>     * Sets the checked state of the item
 162      * @param {Boolean} checked True to check, false to uncheck
 163      * @param {Boolean} suppressEvents (optional) True to prevent firing the checkchange events. Defaults to `false`.
 164      * @markdown
 165      */
 166     setChecked: function(checked, suppressEvents) {
 167         var me = this;
 168         if (me.checked !== checked &amp;&amp; (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
 169             if (me.el) {
 170                 me.el[checked  ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
 171             }
 172             me.checked = checked;
 173             Ext.menu.Manager.onCheckChange(me, checked);
 174             if (!suppressEvents) {
 175                 Ext.callback(me.checkHandler, me.scope, [me, checked]);
 176                 me.fireEvent('checkchange', me, checked);
 177             }
 178         }
 179     }
 180 });
 181 </pre>
 182 </body>
 183 </html>