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