CheckColumn.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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-ux-CheckColumn'>/**
  19. </span> * @class Ext.ux.CheckColumn
  20. * @extends Ext.grid.column.Column
  21. * A Header subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.
  22. *
  23. * Example usage:
  24. *
  25. * // create the grid
  26. * var grid = Ext.create('Ext.grid.Panel', {
  27. * ...
  28. * columns: [{
  29. * text: 'Foo',
  30. * ...
  31. * },{
  32. * xtype: 'checkcolumn',
  33. * text: 'Indoor?',
  34. * dataIndex: 'indoor',
  35. * width: 55
  36. * }]
  37. * ...
  38. * });
  39. *
  40. * In addition to toggling a Boolean value within the record data, this
  41. * class adds or removes a css class &lt;tt&gt;'x-grid-checked'&lt;/tt&gt; on the td
  42. * based on whether or not it is checked to alter the background image used
  43. * for a column.
  44. */
  45. Ext.define('Ext.ux.CheckColumn', {
  46. extend: 'Ext.grid.column.Column',
  47. alias: 'widget.checkcolumn',
  48. <span id='Ext-ux-CheckColumn-cfg-stopSelection'> /**
  49. </span> * @cfg {Boolean} [stopSelection=true]
  50. * Prevent grid selection upon mousedown.
  51. */
  52. stopSelection: true,
  53. tdCls: Ext.baseCSSPrefix + 'grid-cell-checkcolumn',
  54. constructor: function() {
  55. this.addEvents(
  56. <span id='Ext-ux-CheckColumn-event-beforecheckchange'> /**
  57. </span> * @event beforecheckchange
  58. * Fires when before checked state of a row changes.
  59. * The change may be vetoed by returning `false` from a listener.
  60. * @param {Ext.ux.CheckColumn} this CheckColumn
  61. * @param {Number} rowIndex The row index
  62. * @param {Boolean} checked True if the box is to be checked
  63. */
  64. 'beforecheckchange',
  65. <span id='Ext-ux-CheckColumn-event-checkchange'> /**
  66. </span> * @event checkchange
  67. * Fires when the checked state of a row changes
  68. * @param {Ext.ux.CheckColumn} this CheckColumn
  69. * @param {Number} rowIndex The row index
  70. * @param {Boolean} checked True if the box is now checked
  71. */
  72. 'checkchange'
  73. );
  74. this.callParent(arguments);
  75. },
  76. <span id='Ext-ux-CheckColumn-method-processEvent'> /**
  77. </span> * @private
  78. * Process and refire events routed from the GridView's processEvent method.
  79. */
  80. processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
  81. var me = this,
  82. key = type === 'keydown' &amp;&amp; e.getKey(),
  83. mousedown = type == 'mousedown';
  84. if (mousedown || (key == e.ENTER || key == e.SPACE)) {
  85. var dataIndex = me.dataIndex,
  86. checked = !record.get(dataIndex);
  87. // Allow apps to hook beforecheckchange
  88. if (me.fireEvent('beforecheckchange', me, recordIndex, checked) !== false) {
  89. record.set(dataIndex, checked);
  90. me.fireEvent('checkchange', me, recordIndex, checked);
  91. // Mousedown on the now nonexistent cell causes the view to blur, so stop it continuing.
  92. if (mousedown) {
  93. e.stopEvent();
  94. }
  95. // Selection will not proceed after this because of the DOM update caused by the record modification
  96. // Invoke the SelectionModel unless configured not to do so
  97. if (!me.stopSelection) {
  98. view.selModel.selectByPosition({
  99. row: recordIndex,
  100. column: cellIndex
  101. });
  102. }
  103. // Prevent the view from propagating the event to the selection model - we have done that job.
  104. return false;
  105. } else {
  106. // Prevent the view from propagating the event to the selection model if configured to do so.
  107. return !me.stopSelection;
  108. }
  109. } else {
  110. return me.callParent(arguments);
  111. }
  112. },
  113. // Note: class names are not placed on the prototype bc renderer scope
  114. // is not in the header.
  115. renderer : function(value){
  116. var cssPrefix = Ext.baseCSSPrefix,
  117. cls = [cssPrefix + 'grid-checkheader'];
  118. if (value) {
  119. cls.push(cssPrefix + 'grid-checkheader-checked');
  120. }
  121. return '&lt;div class=&quot;' + cls.join(' ') + '&quot;&gt;&amp;#160;&lt;/div&gt;';
  122. }
  123. });
  124. </pre>
  125. </body>
  126. </html>