4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-selection-CheckboxModel'>/**
19 </span> * @class Ext.selection.CheckboxModel
20 * @extends Ext.selection.RowModel
22 * A selection model that renders a column of checkboxes that can be toggled to
23 * select or deselect rows. The default mode for this selection model is MULTI.
25 * The selection model will inject a header for the checkboxes in the first view
26 * and according to the 'injectCheckbox' configuration.
28 Ext.define('Ext.selection.CheckboxModel', {
29 alias: 'selection.checkboxmodel',
30 extend: 'Ext.selection.RowModel',
32 <span id='Ext-selection-CheckboxModel-cfg-mode'> /**
33 </span> * @cfg {String} mode
35 * Valid values are SINGLE, SIMPLE, and MULTI. Defaults to 'MULTI'
39 <span id='Ext-selection-CheckboxModel-cfg-injectCheckbox'> /**
40 </span> * @cfg {Mixed} injectCheckbox
41 * Instructs the SelectionModel whether or not to inject the checkbox header
42 * automatically or not. (Note: By not placing the checkbox in manually, the
43 * grid view will need to be rendered 2x on initial render.)
44 * Supported values are a Number index, false and the strings 'first' and 'last'.
49 <span id='Ext-selection-CheckboxModel-cfg-checkOnly'> /**
50 </span> * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the
51 * checkbox column (defaults to <tt>false</tt>).
56 checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
58 bindComponent: function() {
59 this.sortable = false;
60 this.callParent(arguments);
62 var view = this.views[0],
63 headerCt = view.headerCt;
65 if (this.injectCheckbox !== false) {
66 if (this.injectCheckbox == 'first') {
67 this.injectCheckbox = 0;
68 } else if (this.injectCheckbox == 'last') {
69 this.injectCheckbox = headerCt.getColumnCount();
71 headerCt.add(this.injectCheckbox, this.getHeaderConfig());
73 headerCt.on('headerclick', this.onHeaderClick, this);
76 <span id='Ext-selection-CheckboxModel-method-toggleUiHeader'> /**
77 </span> * Toggle the ui header between checked and unchecked state.
78 * @param {Boolean} isChecked
81 toggleUiHeader: function(isChecked) {
82 var view = this.views[0],
83 headerCt = view.headerCt,
84 checkHd = headerCt.child('gridcolumn[isCheckerHd]');
88 checkHd.el.addCls(this.checkerOnCls);
90 checkHd.el.removeCls(this.checkerOnCls);
95 <span id='Ext-selection-CheckboxModel-method-onHeaderClick'> /**
96 </span> * Toggle between selecting all and deselecting all when clicking on
99 onHeaderClick: function(headerCt, header, e) {
100 if (header.isCheckerHd) {
102 var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
104 // We have to supress the event or it will scrollTo the change
105 this.deselectAll(true);
107 // We have to supress the event or it will scrollTo the change
108 this.selectAll(true);
113 <span id='Ext-selection-CheckboxModel-method-getHeaderConfig'> /**
114 </span> * Retrieve a configuration to be used in a HeaderContainer.
115 * This should be used when injectCheckbox is set to false.
117 getHeaderConfig: function() {
127 cls: Ext.baseCSSPrefix + 'column-header-checkbox ',
128 renderer: Ext.Function.bind(this.renderer, this)
132 <span id='Ext-selection-CheckboxModel-method-renderer'> /**
133 </span> * Generates the HTML to be rendered in the injected checkbox column for each row.
134 * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
135 * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
137 renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
138 metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
139 return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker">&#160;</div>';
143 onRowMouseDown: function(view, record, item, index, e) {
146 checker = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-checker');
148 // checkOnly set, but we didn't click on a checker.
149 if (me.checkOnly && !checker) {
154 var mode = me.getSelectionMode();
155 // dont change the mode if its single otherwise
156 // we would get multiple selection
157 if (mode !== 'SINGLE') {
158 me.setSelectionMode('SIMPLE');
160 me.selectWithEvent(record, e);
161 me.setSelectionMode(mode);
163 me.selectWithEvent(record, e);
167 <span id='Ext-selection-CheckboxModel-method-onSelectChange'> /**
168 </span> * Synchronize header checker value as selection changes.
171 onSelectChange: function() {
172 this.callParent(arguments);
174 // check to see if all records are selected
175 var hdSelectStatus = this.selected.getCount() === this.store.getCount();
176 this.toggleUiHeader(hdSelectStatus);