CheckItem.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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. <span id='Ext-menu-CheckItem-cfg-checked'> /**
  45. </span> * @cfg {Boolean} [checked=false]
  46. * True to render the menuitem initially checked.
  47. */
  48. <span id='Ext-menu-CheckItem-cfg-checkHandler'> /**
  49. </span> * @cfg {Function} checkHandler
  50. * Alternative for the {@link #checkchange} event. Gets called with the same parameters.
  51. */
  52. <span id='Ext-menu-CheckItem-cfg-scope'> /**
  53. </span> * @cfg {Object} scope
  54. * Scope for the {@link #checkHandler} callback.
  55. */
  56. <span id='Ext-menu-CheckItem-cfg-group'> /**
  57. </span> * @cfg {String} group
  58. * Name of a radio group that the item belongs.
  59. *
  60. * Specifying this option will turn check item into a radio item.
  61. *
  62. * Note that the group name must be globally unique.
  63. */
  64. <span id='Ext-menu-CheckItem-cfg-checkedCls'> /**
  65. </span> * @cfg {String} checkedCls
  66. * The CSS class used by {@link #cls} to show the checked state.
  67. * Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
  68. */
  69. checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
  70. <span id='Ext-menu-CheckItem-cfg-uncheckedCls'> /**
  71. </span> * @cfg {String} uncheckedCls
  72. * The CSS class used by {@link #cls} to show the unchecked state.
  73. * Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
  74. */
  75. uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
  76. <span id='Ext-menu-CheckItem-cfg-groupCls'> /**
  77. </span> * @cfg {String} groupCls
  78. * The CSS class applied to this item's icon image to denote being a part of a radio group.
  79. * Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
  80. * Any specified {@link #iconCls} overrides this.
  81. */
  82. groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
  83. <span id='Ext-menu-CheckItem-cfg-hideOnClick'> /**
  84. </span> * @cfg {Boolean} [hideOnClick=false]
  85. * Whether to not to hide the owning menu when this item is clicked.
  86. * Defaults to `false` for checkbox items, and to `true` for radio group items.
  87. */
  88. hideOnClick: false,
  89. <span id='Ext-menu-CheckItem-cfg-checkChangeDisabled'> /**
  90. </span> * @cfg {Boolean} [checkChangeDisabled=false]
  91. * True to prevent the checked item from being toggled. Any submenu will still be accessible.
  92. */
  93. checkChangeDisabled: false,
  94. afterRender: function() {
  95. var me = this;
  96. me.callParent();
  97. me.checked = !me.checked;
  98. me.setChecked(!me.checked, true);
  99. if (me.checkChangeDisabled) {
  100. me.disableCheckChange();
  101. }
  102. },
  103. initComponent: function() {
  104. var me = this;
  105. me.addEvents(
  106. <span id='Ext-menu-CheckItem-event-beforecheckchange'> /**
  107. </span> * @event beforecheckchange
  108. * Fires before a change event. Return false to cancel.
  109. * @param {Ext.menu.CheckItem} this
  110. * @param {Boolean} checked
  111. */
  112. 'beforecheckchange',
  113. <span id='Ext-menu-CheckItem-event-checkchange'> /**
  114. </span> * @event checkchange
  115. * Fires after a change event.
  116. * @param {Ext.menu.CheckItem} this
  117. * @param {Boolean} checked
  118. */
  119. 'checkchange'
  120. );
  121. me.callParent(arguments);
  122. Ext.menu.Manager.registerCheckable(me);
  123. if (me.group) {
  124. if (!me.iconCls) {
  125. me.iconCls = me.groupCls;
  126. }
  127. if (me.initialConfig.hideOnClick !== false) {
  128. me.hideOnClick = true;
  129. }
  130. }
  131. },
  132. <span id='Ext-menu-CheckItem-method-disableCheckChange'> /**
  133. </span> * Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
  134. * will still be accessible
  135. */
  136. disableCheckChange: function() {
  137. var me = this,
  138. iconEl = me.iconEl;
  139. if (iconEl) {
  140. iconEl.addCls(me.disabledCls);
  141. }
  142. // In some cases the checkbox will disappear until repainted
  143. // Happens in everything except IE9 strict, see: EXTJSIV-6412
  144. if (!(Ext.isIE9 &amp;&amp; Ext.isStrict) &amp;&amp; me.rendered) {
  145. me.el.repaint();
  146. }
  147. me.checkChangeDisabled = true;
  148. },
  149. <span id='Ext-menu-CheckItem-method-enableCheckChange'> /**
  150. </span> * Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
  151. */
  152. enableCheckChange: function() {
  153. var me = this,
  154. iconEl = me.iconEl;
  155. if (iconEl) {
  156. iconEl.removeCls(me.disabledCls);
  157. }
  158. me.checkChangeDisabled = false;
  159. },
  160. onClick: function(e) {
  161. var me = this;
  162. if(!me.disabled &amp;&amp; !me.checkChangeDisabled &amp;&amp; !(me.checked &amp;&amp; me.group)) {
  163. me.setChecked(!me.checked);
  164. }
  165. this.callParent([e]);
  166. },
  167. onDestroy: function() {
  168. Ext.menu.Manager.unregisterCheckable(this);
  169. this.callParent(arguments);
  170. },
  171. <span id='Ext-menu-CheckItem-method-setChecked'> /**
  172. </span> * Sets the checked state of the item
  173. * @param {Boolean} checked True to check, false to uncheck
  174. * @param {Boolean} [suppressEvents=false] True to prevent firing the checkchange events.
  175. */
  176. setChecked: function(checked, suppressEvents) {
  177. var me = this;
  178. if (me.checked !== checked &amp;&amp; (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
  179. if (me.el) {
  180. me.el[checked ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
  181. }
  182. me.checked = checked;
  183. Ext.menu.Manager.onCheckChange(me, checked);
  184. if (!suppressEvents) {
  185. Ext.callback(me.checkHandler, me.scope, [me, checked]);
  186. me.fireEvent('checkchange', me, checked);
  187. }
  188. }
  189. }
  190. });
  191. </pre>
  192. </body>
  193. </html>