/ext-4.1.0_b3/src/menu/CheckItem.js

https://bitbucket.org/srogerf/javascript · JavaScript · 169 lines · 76 code · 17 blank · 76 comment · 15 complexity · 4ed28bf098b52fec0f8a9dbc7d88c006 MD5 · raw file

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