/ext-4.1.0_b3/docs/source/CheckboxModel.html

https://bitbucket.org/srogerf/javascript · HTML · 249 lines · 221 code · 28 blank · 0 comment · 0 complexity · 341e7596203df8278c12b5db3d468583 MD5 · raw file

  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-selection-CheckboxModel'>/**
  19. </span> * A selection model that renders a column of checkboxes that can be toggled to
  20. * select or deselect rows. The default mode for this selection model is MULTI.
  21. *
  22. * The selection model will inject a header for the checkboxes in the first view
  23. * and according to the 'injectCheckbox' configuration.
  24. */
  25. Ext.define('Ext.selection.CheckboxModel', {
  26. alias: 'selection.checkboxmodel',
  27. extend: 'Ext.selection.RowModel',
  28. <span id='Ext-selection-CheckboxModel-cfg-mode'> /**
  29. </span> * @cfg {String} mode
  30. * Modes of selection.
  31. * Valid values are SINGLE, SIMPLE, and MULTI.
  32. */
  33. mode: 'MULTI',
  34. <span id='Ext-selection-CheckboxModel-cfg-injectCheckbox'> /**
  35. </span> * @cfg {Number/Boolean/String} injectCheckbox
  36. * Instructs the SelectionModel whether or not to inject the checkbox header
  37. * automatically or not. (Note: By not placing the checkbox in manually, the
  38. * grid view will need to be rendered 2x on initial render.)
  39. * Supported values are a Number index, false and the strings 'first' and 'last'.
  40. */
  41. injectCheckbox: 0,
  42. <span id='Ext-selection-CheckboxModel-cfg-checkOnly'> /**
  43. </span> * @cfg {Boolean} checkOnly
  44. * True if rows can only be selected by clicking on the checkbox column.
  45. */
  46. checkOnly: false,
  47. <span id='Ext-selection-CheckboxModel-cfg-showHeaderCheckbox'> /**
  48. </span> * @cfg {Boolean} showHeaderCheckbox
  49. * False to not display the header checkbox at the top of the column.
  50. */
  51. showHeaderCheckbox: true,
  52. headerWidth: 24,
  53. // private
  54. checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
  55. bindComponent: function(view) {
  56. var me = this;
  57. me.sortable = false;
  58. me.callParent(arguments);
  59. if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
  60. // if we have a locked header, only hook up to the first
  61. view.headerCt.on('headerclick', me.onHeaderClick, me);
  62. me.addCheckbox(true);
  63. me.mon(view.ownerCt, 'reconfigure', me.onReconfigure, me);
  64. }
  65. },
  66. hasLockedHeader: function(){
  67. var views = this.views,
  68. vLen = views.length,
  69. v;
  70. for (v = 0; v &lt; vLen; v++) {
  71. if (views[v].headerCt.lockedCt) {
  72. return true;
  73. }
  74. }
  75. return false;
  76. },
  77. <span id='Ext-selection-CheckboxModel-method-addCheckbox'> /**
  78. </span> * Add the header checkbox to the header row
  79. * @private
  80. * @param {Boolean} initial True if we're binding for the first time.
  81. */
  82. addCheckbox: function(initial){
  83. var me = this,
  84. checkbox = me.injectCheckbox,
  85. view = me.views[0],
  86. headerCt = view.headerCt;
  87. if (checkbox !== false) {
  88. if (checkbox == 'first') {
  89. checkbox = 0;
  90. } else if (checkbox == 'last') {
  91. checkbox = headerCt.getColumnCount();
  92. }
  93. headerCt.add(checkbox, me.getHeaderConfig());
  94. }
  95. if (initial !== true) {
  96. view.refresh();
  97. }
  98. },
  99. <span id='Ext-selection-CheckboxModel-method-onReconfigure'> /**
  100. </span> * Handles the grid's reconfigure event. Adds the checkbox header if the columns have been reconfigured.
  101. * @private
  102. * @param {Ext.panel.Table} grid
  103. * @param {Ext.data.Store} store
  104. * @param {Object[]} columns
  105. */
  106. onReconfigure: function(grid, store, columns) {
  107. if(columns) {
  108. this.addCheckbox();
  109. }
  110. },
  111. <span id='Ext-selection-CheckboxModel-method-toggleUiHeader'> /**
  112. </span> * Toggle the ui header between checked and unchecked state.
  113. * @param {Boolean} isChecked
  114. * @private
  115. */
  116. toggleUiHeader: function(isChecked) {
  117. var view = this.views[0],
  118. headerCt = view.headerCt,
  119. checkHd = headerCt.child('gridcolumn[isCheckerHd]');
  120. if (checkHd) {
  121. if (isChecked) {
  122. checkHd.el.addCls(this.checkerOnCls);
  123. } else {
  124. checkHd.el.removeCls(this.checkerOnCls);
  125. }
  126. }
  127. },
  128. <span id='Ext-selection-CheckboxModel-method-onHeaderClick'> /**
  129. </span> * Toggle between selecting all and deselecting all when clicking on
  130. * a checkbox header.
  131. */
  132. onHeaderClick: function(headerCt, header, e) {
  133. if (header.isCheckerHd) {
  134. e.stopEvent();
  135. var me = this,
  136. isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
  137. // Prevent focus changes on the view, since we're selecting/deselecting all records
  138. me.preventFocus = true;
  139. if (isChecked) {
  140. me.deselectAll();
  141. } else {
  142. me.selectAll();
  143. }
  144. delete me.preventFocus;
  145. }
  146. },
  147. <span id='Ext-selection-CheckboxModel-method-getHeaderConfig'> /**
  148. </span> * Retrieve a configuration to be used in a HeaderContainer.
  149. * This should be used when injectCheckbox is set to false.
  150. */
  151. getHeaderConfig: function() {
  152. var me = this,
  153. showCheck = me.showHeaderCheckbox !== false;
  154. return {
  155. isCheckerHd: showCheck,
  156. text : '&amp;#160;',
  157. width: me.headerWidth,
  158. sortable: false,
  159. draggable: false,
  160. resizable: false,
  161. hideable: false,
  162. menuDisabled: true,
  163. dataIndex: '',
  164. cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
  165. renderer: Ext.Function.bind(me.renderer, me),
  166. editRenderer: me.editRenderer || me.renderEmpty,
  167. locked: me.hasLockedHeader()
  168. };
  169. },
  170. renderEmpty: function(){
  171. return '&amp;#160;';
  172. },
  173. <span id='Ext-selection-CheckboxModel-method-renderer'> /**
  174. </span> * Generates the HTML to be rendered in the injected checkbox column for each row.
  175. * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
  176. * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
  177. */
  178. renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
  179. var baseCSSPrefix = Ext.baseCSSPrefix;
  180. metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
  181. return '&lt;div class=&quot;' + baseCSSPrefix + 'grid-row-checker&quot;&gt;&amp;#160;&lt;/div&gt;';
  182. },
  183. // override
  184. onRowMouseDown: function(view, record, item, index, e) {
  185. view.el.focus();
  186. var me = this,
  187. checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
  188. if (!me.allowRightMouseSelection(e)) {
  189. return;
  190. }
  191. // checkOnly set, but we didn't click on a checker.
  192. if (me.checkOnly &amp;&amp; !checker) {
  193. return;
  194. }
  195. if (checker) {
  196. var mode = me.getSelectionMode();
  197. // dont change the mode if its single otherwise
  198. // we would get multiple selection
  199. if (mode !== 'SINGLE') {
  200. me.setSelectionMode('SIMPLE');
  201. }
  202. me.selectWithEvent(record, e);
  203. me.setSelectionMode(mode);
  204. } else {
  205. me.selectWithEvent(record, e);
  206. }
  207. },
  208. <span id='Ext-selection-CheckboxModel-method-onSelectChange'> /**
  209. </span> * Synchronize header checker value as selection changes.
  210. * @private
  211. */
  212. onSelectChange: function() {
  213. this.callParent(arguments);
  214. // check to see if all records are selected
  215. var hdSelectStatus = this.selected.getCount() === this.store.getCount();
  216. this.toggleUiHeader(hdSelectStatus);
  217. }
  218. });
  219. </pre>
  220. </body>
  221. </html>