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