1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.grid.GridPanel |
---|
9 | * @extends Ext.Panel |
---|
10 | * <p>This class represents the primary interface of a component based grid control to represent data |
---|
11 | * in a tabular format of rows and columns. The GridPanel is composed of the following:</p> |
---|
12 | * <div class="mdetail-params"><ul> |
---|
13 | * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows) |
---|
14 | * <div class="sub-desc"></div></li> |
---|
15 | * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup |
---|
16 | * <div class="sub-desc"></div></li> |
---|
17 | * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface |
---|
18 | * <div class="sub-desc"></div></li> |
---|
19 | * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior |
---|
20 | * <div class="sub-desc"></div></li> |
---|
21 | * </ul></div> |
---|
22 | * <p>Example usage:</p> |
---|
23 | * <pre><code> |
---|
24 | var grid = new Ext.grid.GridPanel({ |
---|
25 | {@link #store}: new (@link Ext.data.Store}({ |
---|
26 | {@link Ext.data.Store#autoDestroy autoDestroy}: true, |
---|
27 | {@link Ext.data.Store#reader reader}: reader, |
---|
28 | {@link Ext.data.Store#data data}: xg.dummyData |
---|
29 | }), |
---|
30 | {@link #columns}: [ |
---|
31 | {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'}, |
---|
32 | {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, |
---|
33 | {header: 'Change', width: 120, sortable: true, dataIndex: 'change'}, |
---|
34 | {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'}, |
---|
35 | // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype |
---|
36 | {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'} |
---|
37 | ], |
---|
38 | {@link #viewConfig}: { |
---|
39 | {@link Ext.grid.GridView#forceFit forceFit}: true, |
---|
40 | |
---|
41 | // Return CSS class to apply to rows depending upon data values |
---|
42 | {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) { |
---|
43 | var c = record.{@link Ext.data.Record#get get}('change'); |
---|
44 | if (c < 0) { |
---|
45 | return 'price-fall'; |
---|
46 | } else if (c > 0) { |
---|
47 | return 'price-rise'; |
---|
48 | } |
---|
49 | } |
---|
50 | }, |
---|
51 | {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}), |
---|
52 | width: 600, |
---|
53 | height: 300, |
---|
54 | frame: true, |
---|
55 | title: 'Framed with Row Selection and Horizontal Scrolling', |
---|
56 | iconCls: 'icon-grid' |
---|
57 | }); |
---|
58 | * </code></pre> |
---|
59 | * <p><b><u>Notes:</u></b></p> |
---|
60 | * <div class="mdetail-params"><ul> |
---|
61 | * <li>Although this class inherits many configuration options from base classes, some of them |
---|
62 | * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will |
---|
63 | * have no effect.</li> |
---|
64 | * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to |
---|
65 | * scroll its rows. These dimensions can either be set explicitly through the |
---|
66 | * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt> |
---|
67 | * configuration options or implicitly set by using the grid as a child item of a |
---|
68 | * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager} |
---|
69 | * provide the sizing of its child items (for example the Container of the Grid may specify |
---|
70 | * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li> |
---|
71 | * <li>To access the data in a Grid, it is necessary to use the data model encapsulated |
---|
72 | * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li> |
---|
73 | * </ul></div> |
---|
74 | * @constructor |
---|
75 | * @param {Object} config The config object |
---|
76 | * @xtype grid |
---|
77 | */ |
---|
78 | Ext.grid.GridPanel = Ext.extend(Ext.Panel, { |
---|
79 | /** |
---|
80 | * @cfg {String} autoExpandColumn |
---|
81 | * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in |
---|
82 | * this grid that should expand to fill unused space. This value specified here can not |
---|
83 | * be <tt>0</tt>.</p> |
---|
84 | * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with |
---|
85 | * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt> |
---|
86 | * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt> |
---|
87 | * for additional details.</p> |
---|
88 | * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p> |
---|
89 | */ |
---|
90 | autoExpandColumn : false, |
---|
91 | /** |
---|
92 | * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt> |
---|
93 | * can have (if enabled). Defaults to <tt>1000</tt>. |
---|
94 | */ |
---|
95 | autoExpandMax : 1000, |
---|
96 | /** |
---|
97 | * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt> |
---|
98 | * can have (if enabled). Defaults to <tt>50</tt>. |
---|
99 | */ |
---|
100 | autoExpandMin : 50, |
---|
101 | /** |
---|
102 | * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines. |
---|
103 | * Default is <tt>false</tt>. |
---|
104 | */ |
---|
105 | columnLines : false, |
---|
106 | /** |
---|
107 | * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>. |
---|
108 | */ |
---|
109 | /** |
---|
110 | * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required). |
---|
111 | */ |
---|
112 | /** |
---|
113 | * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a |
---|
114 | * {@link Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the |
---|
115 | * <tt>{@link #colModel}</tt> configuration property. |
---|
116 | */ |
---|
117 | /** |
---|
118 | * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified. |
---|
119 | */ |
---|
120 | /** |
---|
121 | * @cfg {String} ddText |
---|
122 | * Configures the text in the drag proxy. Defaults to: |
---|
123 | * <pre><code> |
---|
124 | * ddText : '{0} selected row{1}' |
---|
125 | * </code></pre> |
---|
126 | * <tt>{0}</tt> is replaced with the number of selected rows. |
---|
127 | */ |
---|
128 | ddText : '{0} selected row{1}', |
---|
129 | /** |
---|
130 | * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p> |
---|
131 | * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row |
---|
132 | * structure deferred so that layouts with GridPanels appear more quickly.</p> |
---|
133 | */ |
---|
134 | deferRowRender : true, |
---|
135 | /** |
---|
136 | * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p> |
---|
137 | * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p> |
---|
138 | */ |
---|
139 | /** |
---|
140 | * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>. |
---|
141 | */ |
---|
142 | /** |
---|
143 | * @cfg {Boolean} enableColumnHide Defaults to <tt>true</tt> to enable hiding of columns with the header context menu. |
---|
144 | */ |
---|
145 | enableColumnHide : true, |
---|
146 | /** |
---|
147 | * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt> |
---|
148 | * to turn off column reordering via drag drop. |
---|
149 | */ |
---|
150 | enableColumnMove : true, |
---|
151 | /** |
---|
152 | * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p> |
---|
153 | * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to |
---|
154 | * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b> |
---|
155 | * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt> |
---|
156 | * property.</p> |
---|
157 | * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of |
---|
158 | * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, |
---|
159 | * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able |
---|
160 | * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p> |
---|
161 | */ |
---|
162 | enableDragDrop : false, |
---|
163 | /** |
---|
164 | * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers. |
---|
165 | */ |
---|
166 | enableHdMenu : true, |
---|
167 | /** |
---|
168 | * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>. |
---|
169 | */ |
---|
170 | /** |
---|
171 | * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while |
---|
172 | * loading. Defaults to <code>false</code>. |
---|
173 | */ |
---|
174 | loadMask : false, |
---|
175 | /** |
---|
176 | * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on. |
---|
177 | */ |
---|
178 | /** |
---|
179 | * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>. |
---|
180 | */ |
---|
181 | minColumnWidth : 25, |
---|
182 | /** |
---|
183 | * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>. |
---|
184 | */ |
---|
185 | /** |
---|
186 | * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide |
---|
187 | * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified). |
---|
188 | */ |
---|
189 | /** |
---|
190 | * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required). |
---|
191 | */ |
---|
192 | /** |
---|
193 | * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>. |
---|
194 | * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of |
---|
195 | * the grid. A default CSS rule is provided which sets a background colour, but you can override this |
---|
196 | * with a rule which either overrides the <b>background-color</b> style using the '!important' |
---|
197 | * modifier, or which uses a CSS selector of higher specificity.</p> |
---|
198 | */ |
---|
199 | stripeRows : false, |
---|
200 | /** |
---|
201 | * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt> |
---|
202 | * for GridPanel, but <tt>false</tt> for EditorGridPanel. |
---|
203 | */ |
---|
204 | trackMouseOver : true, |
---|
205 | /** |
---|
206 | * @cfg {Array} stateEvents |
---|
207 | * An array of events that, when fired, should trigger this component to save its state. |
---|
208 | * Defaults to:<pre><code> |
---|
209 | * stateEvents: ['columnmove', 'columnresize', 'sortchange'] |
---|
210 | * </code></pre> |
---|
211 | * <p>These can be any types of events supported by this component, including browser or |
---|
212 | * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p> |
---|
213 | * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring |
---|
214 | * Component state.</p> |
---|
215 | */ |
---|
216 | stateEvents : ['columnmove', 'columnresize', 'sortchange'], |
---|
217 | /** |
---|
218 | * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set |
---|
219 | * before a call to {@link Ext.Component#render render()}. |
---|
220 | */ |
---|
221 | view : null, |
---|
222 | /** |
---|
223 | * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view. Any of |
---|
224 | * the config options available for {@link Ext.grid.GridView} can be specified here. This option |
---|
225 | * is ignored if <tt>{@link #view}</tt> is specified. |
---|
226 | */ |
---|
227 | |
---|
228 | // private |
---|
229 | rendered : false, |
---|
230 | // private |
---|
231 | viewReady : false, |
---|
232 | |
---|
233 | // private |
---|
234 | initComponent : function(){ |
---|
235 | Ext.grid.GridPanel.superclass.initComponent.call(this); |
---|
236 | |
---|
237 | if(this.columnLines){ |
---|
238 | this.cls = (this.cls || '') + ' x-grid-with-col-lines'; |
---|
239 | } |
---|
240 | // override any provided value since it isn't valid |
---|
241 | // and is causing too many bug reports ;) |
---|
242 | this.autoScroll = false; |
---|
243 | this.autoWidth = false; |
---|
244 | |
---|
245 | if(Ext.isArray(this.columns)){ |
---|
246 | this.colModel = new Ext.grid.ColumnModel(this.columns); |
---|
247 | delete this.columns; |
---|
248 | } |
---|
249 | |
---|
250 | // check and correct shorthanded configs |
---|
251 | if(this.ds){ |
---|
252 | this.store = this.ds; |
---|
253 | delete this.ds; |
---|
254 | } |
---|
255 | if(this.cm){ |
---|
256 | this.colModel = this.cm; |
---|
257 | delete this.cm; |
---|
258 | } |
---|
259 | if(this.sm){ |
---|
260 | this.selModel = this.sm; |
---|
261 | delete this.sm; |
---|
262 | } |
---|
263 | this.store = Ext.StoreMgr.lookup(this.store); |
---|
264 | |
---|
265 | this.addEvents( |
---|
266 | // raw events |
---|
267 | /** |
---|
268 | * @event click |
---|
269 | * The raw click event for the entire grid. |
---|
270 | * @param {Ext.EventObject} e |
---|
271 | */ |
---|
272 | 'click', |
---|
273 | /** |
---|
274 | * @event dblclick |
---|
275 | * The raw dblclick event for the entire grid. |
---|
276 | * @param {Ext.EventObject} e |
---|
277 | */ |
---|
278 | 'dblclick', |
---|
279 | /** |
---|
280 | * @event contextmenu |
---|
281 | * The raw contextmenu event for the entire grid. |
---|
282 | * @param {Ext.EventObject} e |
---|
283 | */ |
---|
284 | 'contextmenu', |
---|
285 | /** |
---|
286 | * @event mousedown |
---|
287 | * The raw mousedown event for the entire grid. |
---|
288 | * @param {Ext.EventObject} e |
---|
289 | */ |
---|
290 | 'mousedown', |
---|
291 | /** |
---|
292 | * @event mouseup |
---|
293 | * The raw mouseup event for the entire grid. |
---|
294 | * @param {Ext.EventObject} e |
---|
295 | */ |
---|
296 | 'mouseup', |
---|
297 | /** |
---|
298 | * @event mouseover |
---|
299 | * The raw mouseover event for the entire grid. |
---|
300 | * @param {Ext.EventObject} e |
---|
301 | */ |
---|
302 | 'mouseover', |
---|
303 | /** |
---|
304 | * @event mouseout |
---|
305 | * The raw mouseout event for the entire grid. |
---|
306 | * @param {Ext.EventObject} e |
---|
307 | */ |
---|
308 | 'mouseout', |
---|
309 | /** |
---|
310 | * @event keypress |
---|
311 | * The raw keypress event for the entire grid. |
---|
312 | * @param {Ext.EventObject} e |
---|
313 | */ |
---|
314 | 'keypress', |
---|
315 | /** |
---|
316 | * @event keydown |
---|
317 | * The raw keydown event for the entire grid. |
---|
318 | * @param {Ext.EventObject} e |
---|
319 | */ |
---|
320 | 'keydown', |
---|
321 | |
---|
322 | // custom events |
---|
323 | /** |
---|
324 | * @event cellmousedown |
---|
325 | * Fires before a cell is clicked |
---|
326 | * @param {Grid} this |
---|
327 | * @param {Number} rowIndex |
---|
328 | * @param {Number} columnIndex |
---|
329 | * @param {Ext.EventObject} e |
---|
330 | */ |
---|
331 | 'cellmousedown', |
---|
332 | /** |
---|
333 | * @event rowmousedown |
---|
334 | * Fires before a row is clicked |
---|
335 | * @param {Grid} this |
---|
336 | * @param {Number} rowIndex |
---|
337 | * @param {Ext.EventObject} e |
---|
338 | */ |
---|
339 | 'rowmousedown', |
---|
340 | /** |
---|
341 | * @event headermousedown |
---|
342 | * Fires before a header is clicked |
---|
343 | * @param {Grid} this |
---|
344 | * @param {Number} columnIndex |
---|
345 | * @param {Ext.EventObject} e |
---|
346 | */ |
---|
347 | 'headermousedown', |
---|
348 | |
---|
349 | /** |
---|
350 | * @event cellclick |
---|
351 | * Fires when a cell is clicked. |
---|
352 | * The data for the cell is drawn from the {@link Ext.data.Record Record} |
---|
353 | * for this row. To access the data in the listener function use the |
---|
354 | * following technique: |
---|
355 | * <pre><code> |
---|
356 | function(grid, rowIndex, columnIndex, e) { |
---|
357 | var record = grid.getStore().getAt(rowIndex); // Get the Record |
---|
358 | var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name |
---|
359 | var data = record.get(fieldName); |
---|
360 | } |
---|
361 | </code></pre> |
---|
362 | * @param {Grid} this |
---|
363 | * @param {Number} rowIndex |
---|
364 | * @param {Number} columnIndex |
---|
365 | * @param {Ext.EventObject} e |
---|
366 | */ |
---|
367 | 'cellclick', |
---|
368 | /** |
---|
369 | * @event celldblclick |
---|
370 | * Fires when a cell is double clicked |
---|
371 | * @param {Grid} this |
---|
372 | * @param {Number} rowIndex |
---|
373 | * @param {Number} columnIndex |
---|
374 | * @param {Ext.EventObject} e |
---|
375 | */ |
---|
376 | 'celldblclick', |
---|
377 | /** |
---|
378 | * @event rowclick |
---|
379 | * Fires when a row is clicked |
---|
380 | * @param {Grid} this |
---|
381 | * @param {Number} rowIndex |
---|
382 | * @param {Ext.EventObject} e |
---|
383 | */ |
---|
384 | 'rowclick', |
---|
385 | /** |
---|
386 | * @event rowdblclick |
---|
387 | * Fires when a row is double clicked |
---|
388 | * @param {Grid} this |
---|
389 | * @param {Number} rowIndex |
---|
390 | * @param {Ext.EventObject} e |
---|
391 | */ |
---|
392 | 'rowdblclick', |
---|
393 | /** |
---|
394 | * @event headerclick |
---|
395 | * Fires when a header is clicked |
---|
396 | * @param {Grid} this |
---|
397 | * @param {Number} columnIndex |
---|
398 | * @param {Ext.EventObject} e |
---|
399 | */ |
---|
400 | 'headerclick', |
---|
401 | /** |
---|
402 | * @event headerdblclick |
---|
403 | * Fires when a header cell is double clicked |
---|
404 | * @param {Grid} this |
---|
405 | * @param {Number} columnIndex |
---|
406 | * @param {Ext.EventObject} e |
---|
407 | */ |
---|
408 | 'headerdblclick', |
---|
409 | /** |
---|
410 | * @event rowcontextmenu |
---|
411 | * Fires when a row is right clicked |
---|
412 | * @param {Grid} this |
---|
413 | * @param {Number} rowIndex |
---|
414 | * @param {Ext.EventObject} e |
---|
415 | */ |
---|
416 | 'rowcontextmenu', |
---|
417 | /** |
---|
418 | * @event cellcontextmenu |
---|
419 | * Fires when a cell is right clicked |
---|
420 | * @param {Grid} this |
---|
421 | * @param {Number} rowIndex |
---|
422 | * @param {Number} cellIndex |
---|
423 | * @param {Ext.EventObject} e |
---|
424 | */ |
---|
425 | 'cellcontextmenu', |
---|
426 | /** |
---|
427 | * @event headercontextmenu |
---|
428 | * Fires when a header is right clicked |
---|
429 | * @param {Grid} this |
---|
430 | * @param {Number} columnIndex |
---|
431 | * @param {Ext.EventObject} e |
---|
432 | */ |
---|
433 | 'headercontextmenu', |
---|
434 | /** |
---|
435 | * @event bodyscroll |
---|
436 | * Fires when the body element is scrolled |
---|
437 | * @param {Number} scrollLeft |
---|
438 | * @param {Number} scrollTop |
---|
439 | */ |
---|
440 | 'bodyscroll', |
---|
441 | /** |
---|
442 | * @event columnresize |
---|
443 | * Fires when the user resizes a column |
---|
444 | * @param {Number} columnIndex |
---|
445 | * @param {Number} newSize |
---|
446 | */ |
---|
447 | 'columnresize', |
---|
448 | /** |
---|
449 | * @event columnmove |
---|
450 | * Fires when the user moves a column |
---|
451 | * @param {Number} oldIndex |
---|
452 | * @param {Number} newIndex |
---|
453 | */ |
---|
454 | 'columnmove', |
---|
455 | /** |
---|
456 | * @event sortchange |
---|
457 | * Fires when the grid's store sort changes |
---|
458 | * @param {Grid} this |
---|
459 | * @param {Object} sortInfo An object with the keys field and direction |
---|
460 | */ |
---|
461 | 'sortchange', |
---|
462 | /** |
---|
463 | * @event reconfigure |
---|
464 | * Fires when the grid is reconfigured with a new store and/or column model. |
---|
465 | * @param {Grid} this |
---|
466 | * @param {Ext.data.Store} store The new store |
---|
467 | * @param {Ext.grid.ColumnModel} colModel The new column model |
---|
468 | */ |
---|
469 | 'reconfigure' |
---|
470 | ); |
---|
471 | }, |
---|
472 | |
---|
473 | // private |
---|
474 | onRender : function(ct, position){ |
---|
475 | Ext.grid.GridPanel.superclass.onRender.apply(this, arguments); |
---|
476 | |
---|
477 | var c = this.body; |
---|
478 | |
---|
479 | this.el.addClass('x-grid-panel'); |
---|
480 | |
---|
481 | var view = this.getView(); |
---|
482 | view.init(this); |
---|
483 | |
---|
484 | this.mon(c, { |
---|
485 | mousedown: this.onMouseDown, |
---|
486 | click: this.onClick, |
---|
487 | dblclick: this.onDblClick, |
---|
488 | contextmenu: this.onContextMenu, |
---|
489 | keydown: this.onKeyDown, |
---|
490 | scope: this |
---|
491 | }); |
---|
492 | |
---|
493 | this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress']); |
---|
494 | |
---|
495 | this.getSelectionModel().init(this); |
---|
496 | this.view.render(); |
---|
497 | }, |
---|
498 | |
---|
499 | // private |
---|
500 | initEvents : function(){ |
---|
501 | Ext.grid.GridPanel.superclass.initEvents.call(this); |
---|
502 | |
---|
503 | if(this.loadMask){ |
---|
504 | this.loadMask = new Ext.LoadMask(this.bwrap, |
---|
505 | Ext.apply({store:this.store}, this.loadMask)); |
---|
506 | } |
---|
507 | }, |
---|
508 | |
---|
509 | initStateEvents : function(){ |
---|
510 | Ext.grid.GridPanel.superclass.initStateEvents.call(this); |
---|
511 | this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100}); |
---|
512 | }, |
---|
513 | |
---|
514 | applyState : function(state){ |
---|
515 | var cm = this.colModel; |
---|
516 | var cs = state.columns; |
---|
517 | if(cs){ |
---|
518 | for(var i = 0, len = cs.length; i < len; i++){ |
---|
519 | var s = cs[i]; |
---|
520 | var c = cm.getColumnById(s.id); |
---|
521 | if(c){ |
---|
522 | c.hidden = s.hidden; |
---|
523 | c.width = s.width; |
---|
524 | var oldIndex = cm.getIndexById(s.id); |
---|
525 | if(oldIndex != i){ |
---|
526 | cm.moveColumn(oldIndex, i); |
---|
527 | } |
---|
528 | } |
---|
529 | } |
---|
530 | } |
---|
531 | if(state.sort && this.store){ |
---|
532 | this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction); |
---|
533 | } |
---|
534 | delete state.columns; |
---|
535 | delete state.sort; |
---|
536 | Ext.grid.GridPanel.superclass.applyState.call(this, state); |
---|
537 | }, |
---|
538 | |
---|
539 | getState : function(){ |
---|
540 | var o = {columns: []}; |
---|
541 | for(var i = 0, c; (c = this.colModel.config[i]); i++){ |
---|
542 | o.columns[i] = { |
---|
543 | id: c.id, |
---|
544 | width: c.width |
---|
545 | }; |
---|
546 | if(c.hidden){ |
---|
547 | o.columns[i].hidden = true; |
---|
548 | } |
---|
549 | } |
---|
550 | if(this.store){ |
---|
551 | var ss = this.store.getSortState(); |
---|
552 | if(ss){ |
---|
553 | o.sort = ss; |
---|
554 | } |
---|
555 | } |
---|
556 | return o; |
---|
557 | }, |
---|
558 | |
---|
559 | // private |
---|
560 | afterRender : function(){ |
---|
561 | Ext.grid.GridPanel.superclass.afterRender.call(this); |
---|
562 | this.view.layout(); |
---|
563 | if(this.deferRowRender){ |
---|
564 | this.view.afterRender.defer(10, this.view); |
---|
565 | }else{ |
---|
566 | this.view.afterRender(); |
---|
567 | } |
---|
568 | this.viewReady = true; |
---|
569 | }, |
---|
570 | |
---|
571 | /** |
---|
572 | * <p>Reconfigures the grid to use a different Store and Column Model |
---|
573 | * and fires the 'reconfigure' event. The View will be bound to the new |
---|
574 | * objects and refreshed.</p> |
---|
575 | * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become |
---|
576 | * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the |
---|
577 | * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound |
---|
578 | * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring |
---|
579 | * with the new data.</p> |
---|
580 | * @param {Ext.data.Store} store The new {@link Ext.data.Store} object |
---|
581 | * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object |
---|
582 | */ |
---|
583 | reconfigure : function(store, colModel){ |
---|
584 | if(this.loadMask){ |
---|
585 | this.loadMask.destroy(); |
---|
586 | this.loadMask = new Ext.LoadMask(this.bwrap, |
---|
587 | Ext.apply({}, {store:store}, this.initialConfig.loadMask)); |
---|
588 | } |
---|
589 | this.view.initData(store, colModel); |
---|
590 | this.store = store; |
---|
591 | this.colModel = colModel; |
---|
592 | if(this.rendered){ |
---|
593 | this.view.refresh(true); |
---|
594 | } |
---|
595 | this.fireEvent('reconfigure', this, store, colModel); |
---|
596 | }, |
---|
597 | |
---|
598 | // private |
---|
599 | onKeyDown : function(e){ |
---|
600 | this.fireEvent('keydown', e); |
---|
601 | }, |
---|
602 | |
---|
603 | // private |
---|
604 | onDestroy : function(){ |
---|
605 | if(this.rendered){ |
---|
606 | var c = this.body; |
---|
607 | c.removeAllListeners(); |
---|
608 | c.update(''); |
---|
609 | Ext.destroy(this.view, this.loadMask); |
---|
610 | }else if(this.store && this.store.autoDestroy){ |
---|
611 | this.store.destroy(); |
---|
612 | } |
---|
613 | Ext.destroy(this.colModel, this.selModel); |
---|
614 | this.store = this.selModel = this.colModel = this.view = this.loadMask = null; |
---|
615 | Ext.grid.GridPanel.superclass.onDestroy.call(this); |
---|
616 | }, |
---|
617 | |
---|
618 | // private |
---|
619 | processEvent : function(name, e){ |
---|
620 | this.fireEvent(name, e); |
---|
621 | var t = e.getTarget(); |
---|
622 | var v = this.view; |
---|
623 | var header = v.findHeaderIndex(t); |
---|
624 | if(header !== false){ |
---|
625 | this.fireEvent('header' + name, this, header, e); |
---|
626 | }else{ |
---|
627 | var row = v.findRowIndex(t); |
---|
628 | var cell = v.findCellIndex(t); |
---|
629 | if(row !== false){ |
---|
630 | this.fireEvent('row' + name, this, row, e); |
---|
631 | if(cell !== false){ |
---|
632 | this.fireEvent('cell' + name, this, row, cell, e); |
---|
633 | } |
---|
634 | } |
---|
635 | } |
---|
636 | }, |
---|
637 | |
---|
638 | // private |
---|
639 | onClick : function(e){ |
---|
640 | this.processEvent('click', e); |
---|
641 | }, |
---|
642 | |
---|
643 | // private |
---|
644 | onMouseDown : function(e){ |
---|
645 | this.processEvent('mousedown', e); |
---|
646 | }, |
---|
647 | |
---|
648 | // private |
---|
649 | onContextMenu : function(e, t){ |
---|
650 | this.processEvent('contextmenu', e); |
---|
651 | }, |
---|
652 | |
---|
653 | // private |
---|
654 | onDblClick : function(e){ |
---|
655 | this.processEvent('dblclick', e); |
---|
656 | }, |
---|
657 | |
---|
658 | // private |
---|
659 | walkCells : function(row, col, step, fn, scope){ |
---|
660 | var cm = this.colModel, clen = cm.getColumnCount(); |
---|
661 | var ds = this.store, rlen = ds.getCount(), first = true; |
---|
662 | if(step < 0){ |
---|
663 | if(col < 0){ |
---|
664 | row--; |
---|
665 | first = false; |
---|
666 | } |
---|
667 | while(row >= 0){ |
---|
668 | if(!first){ |
---|
669 | col = clen-1; |
---|
670 | } |
---|
671 | first = false; |
---|
672 | while(col >= 0){ |
---|
673 | if(fn.call(scope || this, row, col, cm) === true){ |
---|
674 | return [row, col]; |
---|
675 | } |
---|
676 | col--; |
---|
677 | } |
---|
678 | row--; |
---|
679 | } |
---|
680 | } else { |
---|
681 | if(col >= clen){ |
---|
682 | row++; |
---|
683 | first = false; |
---|
684 | } |
---|
685 | while(row < rlen){ |
---|
686 | if(!first){ |
---|
687 | col = 0; |
---|
688 | } |
---|
689 | first = false; |
---|
690 | while(col < clen){ |
---|
691 | if(fn.call(scope || this, row, col, cm) === true){ |
---|
692 | return [row, col]; |
---|
693 | } |
---|
694 | col++; |
---|
695 | } |
---|
696 | row++; |
---|
697 | } |
---|
698 | } |
---|
699 | return null; |
---|
700 | }, |
---|
701 | |
---|
702 | // private |
---|
703 | onResize : function(){ |
---|
704 | Ext.grid.GridPanel.superclass.onResize.apply(this, arguments); |
---|
705 | if(this.viewReady){ |
---|
706 | this.view.layout(); |
---|
707 | } |
---|
708 | }, |
---|
709 | |
---|
710 | /** |
---|
711 | * Returns the grid's underlying element. |
---|
712 | * @return {Element} The element |
---|
713 | */ |
---|
714 | getGridEl : function(){ |
---|
715 | return this.body; |
---|
716 | }, |
---|
717 | |
---|
718 | // private for compatibility, overridden by editor grid |
---|
719 | stopEditing : Ext.emptyFn, |
---|
720 | |
---|
721 | /** |
---|
722 | * Returns the grid's selection model configured by the <code>{@link #selModel}</code> |
---|
723 | * configuration option. If no selection model was configured, this will create |
---|
724 | * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}. |
---|
725 | * @return {SelectionModel} |
---|
726 | */ |
---|
727 | getSelectionModel : function(){ |
---|
728 | if(!this.selModel){ |
---|
729 | this.selModel = new Ext.grid.RowSelectionModel( |
---|
730 | this.disableSelection ? {selectRow: Ext.emptyFn} : null); |
---|
731 | } |
---|
732 | return this.selModel; |
---|
733 | }, |
---|
734 | |
---|
735 | /** |
---|
736 | * Returns the grid's data store. |
---|
737 | * @return {Ext.data.Store} The store |
---|
738 | */ |
---|
739 | getStore : function(){ |
---|
740 | return this.store; |
---|
741 | }, |
---|
742 | |
---|
743 | /** |
---|
744 | * Returns the grid's ColumnModel. |
---|
745 | * @return {Ext.grid.ColumnModel} The column model |
---|
746 | */ |
---|
747 | getColumnModel : function(){ |
---|
748 | return this.colModel; |
---|
749 | }, |
---|
750 | |
---|
751 | /** |
---|
752 | * Returns the grid's GridView object. |
---|
753 | * @return {Ext.grid.GridView} The grid view |
---|
754 | */ |
---|
755 | getView : function(){ |
---|
756 | if(!this.view){ |
---|
757 | this.view = new Ext.grid.GridView(this.viewConfig); |
---|
758 | } |
---|
759 | return this.view; |
---|
760 | }, |
---|
761 | /** |
---|
762 | * Called to get grid's drag proxy text, by default returns this.ddText. |
---|
763 | * @return {String} The text |
---|
764 | */ |
---|
765 | getDragDropText : function(){ |
---|
766 | var count = this.selModel.getCount(); |
---|
767 | return String.format(this.ddText, count, count == 1 ? '' : 's'); |
---|
768 | } |
---|
769 | |
---|
770 | /** |
---|
771 | * @cfg {String/Number} activeItem |
---|
772 | * @hide |
---|
773 | */ |
---|
774 | /** |
---|
775 | * @cfg {Boolean} autoDestroy |
---|
776 | * @hide |
---|
777 | */ |
---|
778 | /** |
---|
779 | * @cfg {Object/String/Function} autoLoad |
---|
780 | * @hide |
---|
781 | */ |
---|
782 | /** |
---|
783 | * @cfg {Boolean} autoWidth |
---|
784 | * @hide |
---|
785 | */ |
---|
786 | /** |
---|
787 | * @cfg {Boolean/Number} bufferResize |
---|
788 | * @hide |
---|
789 | */ |
---|
790 | /** |
---|
791 | * @cfg {String} defaultType |
---|
792 | * @hide |
---|
793 | */ |
---|
794 | /** |
---|
795 | * @cfg {Object} defaults |
---|
796 | * @hide |
---|
797 | */ |
---|
798 | /** |
---|
799 | * @cfg {Boolean} hideBorders |
---|
800 | * @hide |
---|
801 | */ |
---|
802 | /** |
---|
803 | * @cfg {Mixed} items |
---|
804 | * @hide |
---|
805 | */ |
---|
806 | /** |
---|
807 | * @cfg {String} layout |
---|
808 | * @hide |
---|
809 | */ |
---|
810 | /** |
---|
811 | * @cfg {Object} layoutConfig |
---|
812 | * @hide |
---|
813 | */ |
---|
814 | /** |
---|
815 | * @cfg {Boolean} monitorResize |
---|
816 | * @hide |
---|
817 | */ |
---|
818 | /** |
---|
819 | * @property items |
---|
820 | * @hide |
---|
821 | */ |
---|
822 | /** |
---|
823 | * @method add |
---|
824 | * @hide |
---|
825 | */ |
---|
826 | /** |
---|
827 | * @method cascade |
---|
828 | * @hide |
---|
829 | */ |
---|
830 | /** |
---|
831 | * @method doLayout |
---|
832 | * @hide |
---|
833 | */ |
---|
834 | /** |
---|
835 | * @method find |
---|
836 | * @hide |
---|
837 | */ |
---|
838 | /** |
---|
839 | * @method findBy |
---|
840 | * @hide |
---|
841 | */ |
---|
842 | /** |
---|
843 | * @method findById |
---|
844 | * @hide |
---|
845 | */ |
---|
846 | /** |
---|
847 | * @method findByType |
---|
848 | * @hide |
---|
849 | */ |
---|
850 | /** |
---|
851 | * @method getComponent |
---|
852 | * @hide |
---|
853 | */ |
---|
854 | /** |
---|
855 | * @method getLayout |
---|
856 | * @hide |
---|
857 | */ |
---|
858 | /** |
---|
859 | * @method getUpdater |
---|
860 | * @hide |
---|
861 | */ |
---|
862 | /** |
---|
863 | * @method insert |
---|
864 | * @hide |
---|
865 | */ |
---|
866 | /** |
---|
867 | * @method load |
---|
868 | * @hide |
---|
869 | */ |
---|
870 | /** |
---|
871 | * @method remove |
---|
872 | * @hide |
---|
873 | */ |
---|
874 | /** |
---|
875 | * @event add |
---|
876 | * @hide |
---|
877 | */ |
---|
878 | /** |
---|
879 | * @event afterLayout |
---|
880 | * @hide |
---|
881 | */ |
---|
882 | /** |
---|
883 | * @event beforeadd |
---|
884 | * @hide |
---|
885 | */ |
---|
886 | /** |
---|
887 | * @event beforeremove |
---|
888 | * @hide |
---|
889 | */ |
---|
890 | /** |
---|
891 | * @event remove |
---|
892 | * @hide |
---|
893 | */ |
---|
894 | |
---|
895 | |
---|
896 | |
---|
897 | /** |
---|
898 | * @cfg {String} allowDomMove @hide |
---|
899 | */ |
---|
900 | /** |
---|
901 | * @cfg {String} autoEl @hide |
---|
902 | */ |
---|
903 | /** |
---|
904 | * @cfg {String} applyTo @hide |
---|
905 | */ |
---|
906 | /** |
---|
907 | * @cfg {String} autoScroll @hide |
---|
908 | */ |
---|
909 | /** |
---|
910 | * @cfg {String} bodyBorder @hide |
---|
911 | */ |
---|
912 | /** |
---|
913 | * @cfg {String} bodyStyle @hide |
---|
914 | */ |
---|
915 | /** |
---|
916 | * @cfg {String} contentEl @hide |
---|
917 | */ |
---|
918 | /** |
---|
919 | * @cfg {String} disabledClass @hide |
---|
920 | */ |
---|
921 | /** |
---|
922 | * @cfg {String} elements @hide |
---|
923 | */ |
---|
924 | /** |
---|
925 | * @cfg {String} html @hide |
---|
926 | */ |
---|
927 | /** |
---|
928 | * @cfg {Boolean} preventBodyReset |
---|
929 | * @hide |
---|
930 | */ |
---|
931 | /** |
---|
932 | * @property disabled |
---|
933 | * @hide |
---|
934 | */ |
---|
935 | /** |
---|
936 | * @method applyToMarkup |
---|
937 | * @hide |
---|
938 | */ |
---|
939 | /** |
---|
940 | * @method enable |
---|
941 | * @hide |
---|
942 | */ |
---|
943 | /** |
---|
944 | * @method disable |
---|
945 | * @hide |
---|
946 | */ |
---|
947 | /** |
---|
948 | * @method setDisabled |
---|
949 | * @hide |
---|
950 | */ |
---|
951 | }); |
---|
952 | Ext.reg('grid', Ext.grid.GridPanel);/** |
---|
953 | * @class Ext.grid.GridView |
---|
954 | * @extends Ext.util.Observable |
---|
955 | * <p>This class encapsulates the user interface of an {@link Ext.grid.GridPanel}. |
---|
956 | * Methods of this class may be used to access user interface elements to enable |
---|
957 | * special display effects. Do not change the DOM structure of the user interface.</p> |
---|
958 | * <p>This class does not provide ways to manipulate the underlying data. The data |
---|
959 | * model of a Grid is held in an {@link Ext.data.Store}.</p> |
---|
960 | * @constructor |
---|
961 | * @param {Object} config |
---|
962 | */ |
---|
963 | Ext.grid.GridView = function(config){ |
---|
964 | Ext.apply(this, config); |
---|
965 | // These events are only used internally by the grid components |
---|
966 | this.addEvents( |
---|
967 | /** |
---|
968 | * @event beforerowremoved |
---|
969 | * Internal UI Event. Fired before a row is removed. |
---|
970 | * @param {Ext.grid.GridView} view |
---|
971 | * @param {Number} rowIndex The index of the row to be removed. |
---|
972 | * @param {Ext.data.Record} record The Record to be removed |
---|
973 | */ |
---|
974 | "beforerowremoved", |
---|
975 | /** |
---|
976 | * @event beforerowsinserted |
---|
977 | * Internal UI Event. Fired before rows are inserted. |
---|
978 | * @param {Ext.grid.GridView} view |
---|
979 | * @param {Number} firstRow The index of the first row to be inserted. |
---|
980 | * @param {Number} lastRow The index of the last row to be inserted. |
---|
981 | */ |
---|
982 | "beforerowsinserted", |
---|
983 | /** |
---|
984 | * @event beforerefresh |
---|
985 | * Internal UI Event. Fired before the view is refreshed. |
---|
986 | * @param {Ext.grid.GridView} view |
---|
987 | */ |
---|
988 | "beforerefresh", |
---|
989 | /** |
---|
990 | * @event rowremoved |
---|
991 | * Internal UI Event. Fired after a row is removed. |
---|
992 | * @param {Ext.grid.GridView} view |
---|
993 | * @param {Number} rowIndex The index of the row that was removed. |
---|
994 | * @param {Ext.data.Record} record The Record that was removed |
---|
995 | */ |
---|
996 | "rowremoved", |
---|
997 | /** |
---|
998 | * @event rowsinserted |
---|
999 | * Internal UI Event. Fired after rows are inserted. |
---|
1000 | * @param {Ext.grid.GridView} view |
---|
1001 | * @param {Number} firstRow The index of the first inserted. |
---|
1002 | * @param {Number} lastRow The index of the last row inserted. |
---|
1003 | */ |
---|
1004 | "rowsinserted", |
---|
1005 | /** |
---|
1006 | * @event rowupdated |
---|
1007 | * Internal UI Event. Fired after a row has been updated. |
---|
1008 | * @param {Ext.grid.GridView} view |
---|
1009 | * @param {Number} firstRow The index of the row updated. |
---|
1010 | * @param {Ext.data.record} record The Record backing the row updated. |
---|
1011 | */ |
---|
1012 | "rowupdated", |
---|
1013 | /** |
---|
1014 | * @event refresh |
---|
1015 | * Internal UI Event. Fired after the GridView's body has been refreshed. |
---|
1016 | * @param {Ext.grid.GridView} view |
---|
1017 | */ |
---|
1018 | "refresh" |
---|
1019 | ); |
---|
1020 | Ext.grid.GridView.superclass.constructor.call(this); |
---|
1021 | }; |
---|
1022 | |
---|
1023 | Ext.extend(Ext.grid.GridView, Ext.util.Observable, { |
---|
1024 | /** |
---|
1025 | * Override this function to apply custom CSS classes to rows during rendering. You can also supply custom |
---|
1026 | * parameters to the row template for the current row to customize how it is rendered using the <b>rowParams</b> |
---|
1027 | * parameter. This function should return the CSS class name (or empty string '' for none) that will be added |
---|
1028 | * to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string |
---|
1029 | * (e.g., 'my-class another-class'). Example usage: |
---|
1030 | <pre><code> |
---|
1031 | viewConfig: { |
---|
1032 | forceFit: true, |
---|
1033 | showPreview: true, // custom property |
---|
1034 | enableRowBody: true, // required to create a second, full-width row to show expanded Record data |
---|
1035 | getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams |
---|
1036 | if(this.showPreview){ |
---|
1037 | rp.body = '<p>'+record.data.excerpt+'</p>'; |
---|
1038 | return 'x-grid3-row-expanded'; |
---|
1039 | } |
---|
1040 | return 'x-grid3-row-collapsed'; |
---|
1041 | } |
---|
1042 | }, |
---|
1043 | </code></pre> |
---|
1044 | * @param {Record} record The {@link Ext.data.Record} corresponding to the current row. |
---|
1045 | * @param {Number} index The row index. |
---|
1046 | * @param {Object} rowParams A config object that is passed to the row template during rendering that allows |
---|
1047 | * customization of various aspects of a grid row. |
---|
1048 | * <p>If {@link #enableRowBody} is configured <b><tt></tt>true</b>, then the following properties may be set |
---|
1049 | * by this function, and will be used to render a full-width expansion row below each grid row:</p> |
---|
1050 | * <ul> |
---|
1051 | * <li><code>body</code> : String <div class="sub-desc">An HTML fragment to be used as the expansion row's body content (defaults to '').</div></li> |
---|
1052 | * <li><code>bodyStyle</code> : String <div class="sub-desc">A CSS style specification that will be applied to the expansion row's <tr> element. (defaults to '').</div></li> |
---|
1053 | * </ul> |
---|
1054 | * The following property will be passed in, and may be appended to: |
---|
1055 | * <ul> |
---|
1056 | * <li><code>tstyle</code> : String <div class="sub-desc">A CSS style specification that willl be applied to the <table> element which encapsulates |
---|
1057 | * both the standard grid row, and any expansion row.</div></li> |
---|
1058 | * </ul> |
---|
1059 | * @param {Store} store The {@link Ext.data.Store} this grid is bound to |
---|
1060 | * @method getRowClass |
---|
1061 | * @return {String} a CSS class name to add to the row. |
---|
1062 | */ |
---|
1063 | /** |
---|
1064 | * @cfg {Boolean} enableRowBody True to add a second TR element per row that can be used to provide a row body |
---|
1065 | * that spans beneath the data row. Use the {@link #getRowClass} method's rowParams config to customize the row body. |
---|
1066 | */ |
---|
1067 | /** |
---|
1068 | * @cfg {String} emptyText Default text (html tags are accepted) to display in the grid body when no rows |
---|
1069 | * are available (defaults to ''). This value will be used to update the <tt>{@link #mainBody}</tt>: |
---|
1070 | <pre><code> |
---|
1071 | this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>'); |
---|
1072 | </code></pre> |
---|
1073 | */ |
---|
1074 | /** |
---|
1075 | * @cfg {Boolean} headersDisabled True to disable the grid column headers (defaults to <tt>false</tt>). |
---|
1076 | * Use the {@link Ext.grid.ColumnModel ColumnModel} <tt>{@link Ext.grid.ColumnModel#menuDisabled menuDisabled}</tt> |
---|
1077 | * config to disable the <i>menu</i> for individual columns. While this config is true the |
---|
1078 | * following will be disabled:<div class="mdetail-params"><ul> |
---|
1079 | * <li>clicking on header to sort</li> |
---|
1080 | * <li>the trigger to reveal the menu.</li> |
---|
1081 | * </ul></div> |
---|
1082 | */ |
---|
1083 | /** |
---|
1084 | * <p>A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations |
---|
1085 | * of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. |
---|
1086 | * See {@link Ext.grid.GridDragZone} for details.</p> |
---|
1087 | * <p>This will <b>only</b> be present:<div class="mdetail-params"><ul> |
---|
1088 | * <li><i>if</i> the owning GridPanel was configured with {@link Ext.grid.GridPanel#enableDragDrop enableDragDrop}: <tt>true</tt>.</li> |
---|
1089 | * <li><i>after</i> the owning GridPanel has been rendered.</li> |
---|
1090 | * </ul></div> |
---|
1091 | * @property dragZone |
---|
1092 | * @type {Ext.grid.GridDragZone} |
---|
1093 | */ |
---|
1094 | /** |
---|
1095 | * @cfg {Boolean} deferEmptyText True to defer <tt>{@link #emptyText}</tt> being applied until the store's |
---|
1096 | * first load (defaults to <tt>true</tt>). |
---|
1097 | */ |
---|
1098 | deferEmptyText : true, |
---|
1099 | /** |
---|
1100 | * @cfg {Number} scrollOffset The amount of space to reserve for the vertical scrollbar |
---|
1101 | * (defaults to <tt>19</tt> pixels). |
---|
1102 | */ |
---|
1103 | scrollOffset : 19, |
---|
1104 | /** |
---|
1105 | * @cfg {Boolean} autoFill |
---|
1106 | * Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned |
---|
1107 | * when the grid is <b>initially rendered</b>. The |
---|
1108 | * {@link Ext.grid.Column#width initially configured width}</tt> of each column will be adjusted |
---|
1109 | * to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually |
---|
1110 | * or programmatically), the other columns in the grid will <b>not</b> be resized to fit the grid width. |
---|
1111 | * See <tt>{@link #forceFit}</tt> also. |
---|
1112 | */ |
---|
1113 | autoFill : false, |
---|
1114 | /** |
---|
1115 | * @cfg {Boolean} forceFit |
---|
1116 | * Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned |
---|
1117 | * at <b>all times</b>. The {@link Ext.grid.Column#width initially configured width}</tt> of each |
---|
1118 | * column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are |
---|
1119 | * later resized (manually or programmatically), the other columns in the grid <b>will</b> be resized |
---|
1120 | * to fit the grid width. See <tt>{@link #autoFill}</tt> also. |
---|
1121 | */ |
---|
1122 | forceFit : false, |
---|
1123 | /** |
---|
1124 | * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to <tt>["sort-asc", "sort-desc"]</tt>) |
---|
1125 | */ |
---|
1126 | sortClasses : ["sort-asc", "sort-desc"], |
---|
1127 | /** |
---|
1128 | * @cfg {String} sortAscText The text displayed in the "Sort Ascending" menu item (defaults to <tt>"Sort Ascending"</tt>) |
---|
1129 | */ |
---|
1130 | sortAscText : "Sort Ascending", |
---|
1131 | /** |
---|
1132 | * @cfg {String} sortDescText The text displayed in the "Sort Descending" menu item (defaults to <tt>"Sort Descending"</tt>) |
---|
1133 | */ |
---|
1134 | sortDescText : "Sort Descending", |
---|
1135 | /** |
---|
1136 | * @cfg {String} columnsText The text displayed in the "Columns" menu item (defaults to <tt>"Columns"</tt>) |
---|
1137 | */ |
---|
1138 | columnsText : "Columns", |
---|
1139 | |
---|
1140 | /** |
---|
1141 | * @cfg {String} selectedRowClass The CSS class applied to a selected row (defaults to <tt>"x-grid3-row-selected"</tt>). An |
---|
1142 | * example overriding the default styling: |
---|
1143 | <pre><code> |
---|
1144 | .x-grid3-row-selected {background-color: yellow;} |
---|
1145 | </code></pre> |
---|
1146 | * Note that this only controls the row, and will not do anything for the text inside it. To style inner |
---|
1147 | * facets (like text) use something like: |
---|
1148 | <pre><code> |
---|
1149 | .x-grid3-row-selected .x-grid3-cell-inner { |
---|
1150 | color: #FFCC00; |
---|
1151 | } |
---|
1152 | </code></pre> |
---|
1153 | * @type String |
---|
1154 | */ |
---|
1155 | selectedRowClass : "x-grid3-row-selected", |
---|
1156 | |
---|
1157 | // private |
---|
1158 | borderWidth : 2, |
---|
1159 | tdClass : 'x-grid3-cell', |
---|
1160 | hdCls : 'x-grid3-hd', |
---|
1161 | markDirty : true, |
---|
1162 | |
---|
1163 | /** |
---|
1164 | * @cfg {Number} cellSelectorDepth The number of levels to search for cells in event delegation (defaults to <tt>4</tt>) |
---|
1165 | */ |
---|
1166 | cellSelectorDepth : 4, |
---|
1167 | /** |
---|
1168 | * @cfg {Number} rowSelectorDepth The number of levels to search for rows in event delegation (defaults to <tt>10</tt>) |
---|
1169 | */ |
---|
1170 | rowSelectorDepth : 10, |
---|
1171 | |
---|
1172 | /** |
---|
1173 | * @cfg {String} cellSelector The selector used to find cells internally (defaults to <tt>'td.x-grid3-cell'</tt>) |
---|
1174 | */ |
---|
1175 | cellSelector : 'td.x-grid3-cell', |
---|
1176 | /** |
---|
1177 | * @cfg {String} rowSelector The selector used to find rows internally (defaults to <tt>'div.x-grid3-row'</tt>) |
---|
1178 | */ |
---|
1179 | rowSelector : 'div.x-grid3-row', |
---|
1180 | |
---|
1181 | // private |
---|
1182 | firstRowCls: 'x-grid3-row-first', |
---|
1183 | lastRowCls: 'x-grid3-row-last', |
---|
1184 | rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g, |
---|
1185 | |
---|
1186 | /* -------------------------------- UI Specific ----------------------------- */ |
---|
1187 | |
---|
1188 | // private |
---|
1189 | initTemplates : function(){ |
---|
1190 | var ts = this.templates || {}; |
---|
1191 | if(!ts.master){ |
---|
1192 | ts.master = new Ext.Template( |
---|
1193 | '<div class="x-grid3" hidefocus="true">', |
---|
1194 | '<div class="x-grid3-viewport">', |
---|
1195 | '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>', |
---|
1196 | '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>', |
---|
1197 | '</div>', |
---|
1198 | '<div class="x-grid3-resize-marker"> </div>', |
---|
1199 | '<div class="x-grid3-resize-proxy"> </div>', |
---|
1200 | '</div>' |
---|
1201 | ); |
---|
1202 | } |
---|
1203 | |
---|
1204 | if(!ts.header){ |
---|
1205 | ts.header = new Ext.Template( |
---|
1206 | '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', |
---|
1207 | '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>', |
---|
1208 | '</table>' |
---|
1209 | ); |
---|
1210 | } |
---|
1211 | |
---|
1212 | if(!ts.hcell){ |
---|
1213 | ts.hcell = new Ext.Template( |
---|
1214 | '<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '', |
---|
1215 | '{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />', |
---|
1216 | '</div></td>' |
---|
1217 | ); |
---|
1218 | } |
---|
1219 | |
---|
1220 | if(!ts.body){ |
---|
1221 | ts.body = new Ext.Template('{rows}'); |
---|
1222 | } |
---|
1223 | |
---|
1224 | if(!ts.row){ |
---|
1225 | ts.row = new Ext.Template( |
---|
1226 | '<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', |
---|
1227 | '<tbody><tr>{cells}</tr>', |
---|
1228 | (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''), |
---|
1229 | '</tbody></table></div>' |
---|
1230 | ); |
---|
1231 | } |
---|
1232 | |
---|
1233 | if(!ts.cell){ |
---|
1234 | ts.cell = new Ext.Template( |
---|
1235 | '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>', |
---|
1236 | '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>', |
---|
1237 | '</td>' |
---|
1238 | ); |
---|
1239 | } |
---|
1240 | |
---|
1241 | for(var k in ts){ |
---|
1242 | var t = ts[k]; |
---|
1243 | if(t && typeof t.compile == 'function' && !t.compiled){ |
---|
1244 | t.disableFormats = true; |
---|
1245 | t.compile(); |
---|
1246 | } |
---|
1247 | } |
---|
1248 | |
---|
1249 | this.templates = ts; |
---|
1250 | this.colRe = new RegExp("x-grid3-td-([^\\s]+)", ""); |
---|
1251 | }, |
---|
1252 | |
---|
1253 | // private |
---|
1254 | fly : function(el){ |
---|
1255 | if(!this._flyweight){ |
---|
1256 | this._flyweight = new Ext.Element.Flyweight(document.body); |
---|
1257 | } |
---|
1258 | this._flyweight.dom = el; |
---|
1259 | return this._flyweight; |
---|
1260 | }, |
---|
1261 | |
---|
1262 | // private |
---|
1263 | getEditorParent : function(){ |
---|
1264 | return this.scroller.dom; |
---|
1265 | }, |
---|
1266 | |
---|
1267 | // private |
---|
1268 | initElements : function(){ |
---|
1269 | var E = Ext.Element; |
---|
1270 | |
---|
1271 | var el = this.grid.getGridEl().dom.firstChild; |
---|
1272 | var cs = el.childNodes; |
---|
1273 | |
---|
1274 | this.el = new E(el); |
---|
1275 | |
---|
1276 | this.mainWrap = new E(cs[0]); |
---|
1277 | this.mainHd = new E(this.mainWrap.dom.firstChild); |
---|
1278 | |
---|
1279 | if(this.grid.hideHeaders){ |
---|
1280 | this.mainHd.setDisplayed(false); |
---|
1281 | } |
---|
1282 | |
---|
1283 | this.innerHd = this.mainHd.dom.firstChild; |
---|
1284 | this.scroller = new E(this.mainWrap.dom.childNodes[1]); |
---|
1285 | if(this.forceFit){ |
---|
1286 | this.scroller.setStyle('overflow-x', 'hidden'); |
---|
1287 | } |
---|
1288 | /** |
---|
1289 | * <i>Read-only</i>. The GridView's body Element which encapsulates all rows in the Grid. |
---|
1290 | * This {@link Ext.Element Element} is only available after the GridPanel has been rendered. |
---|
1291 | * @type Ext.Element |
---|
1292 | * @property mainBody |
---|
1293 | */ |
---|
1294 | this.mainBody = new E(this.scroller.dom.firstChild); |
---|
1295 | |
---|
1296 | this.focusEl = new E(this.scroller.dom.childNodes[1]); |
---|
1297 | this.focusEl.swallowEvent("click", true); |
---|
1298 | |
---|
1299 | this.resizeMarker = new E(cs[1]); |
---|
1300 | this.resizeProxy = new E(cs[2]); |
---|
1301 | }, |
---|
1302 | |
---|
1303 | // private |
---|
1304 | getRows : function(){ |
---|
1305 | return this.hasRows() ? this.mainBody.dom.childNodes : []; |
---|
1306 | }, |
---|
1307 | |
---|
1308 | // finder methods, used with delegation |
---|
1309 | |
---|
1310 | // private |
---|
1311 | findCell : function(el){ |
---|
1312 | if(!el){ |
---|
1313 | return false; |
---|
1314 | } |
---|
1315 | return this.fly(el).findParent(this.cellSelector, this.cellSelectorDepth); |
---|
1316 | }, |
---|
1317 | |
---|
1318 | /** |
---|
1319 | * <p>Return the index of the grid column which contains the passed element.</p> |
---|
1320 | * See also {@link #findRowIndex} |
---|
1321 | * @param {Element} el The target element |
---|
1322 | * @return The column index, or <b>false</b> if the target element is not within a row of this GridView. |
---|
1323 | */ |
---|
1324 | findCellIndex : function(el, requiredCls){ |
---|
1325 | var cell = this.findCell(el); |
---|
1326 | if(cell && (!requiredCls || this.fly(cell).hasClass(requiredCls))){ |
---|
1327 | return this.getCellIndex(cell); |
---|
1328 | } |
---|
1329 | return false; |
---|
1330 | }, |
---|
1331 | |
---|
1332 | // private |
---|
1333 | getCellIndex : function(el){ |
---|
1334 | if(el){ |
---|
1335 | var m = el.className.match(this.colRe); |
---|
1336 | if(m && m[1]){ |
---|
1337 | return this.cm.getIndexById(m[1]); |
---|
1338 | } |
---|
1339 | } |
---|
1340 | return false; |
---|
1341 | }, |
---|
1342 | |
---|
1343 | // private |
---|
1344 | findHeaderCell : function(el){ |
---|
1345 | var cell = this.findCell(el); |
---|
1346 | return cell && this.fly(cell).hasClass(this.hdCls) ? cell : null; |
---|
1347 | }, |
---|
1348 | |
---|
1349 | // private |
---|
1350 | findHeaderIndex : function(el){ |
---|
1351 | return this.findCellIndex(el, this.hdCls); |
---|
1352 | }, |
---|
1353 | |
---|
1354 | /** |
---|
1355 | * Return the HtmlElement representing the grid row which contains the passed element. |
---|
1356 | * @param {Element} el The target element |
---|
1357 | * @return The row element, or null if the target element is not within a row of this GridView. |
---|
1358 | */ |
---|
1359 | findRow : function(el){ |
---|
1360 | if(!el){ |
---|
1361 | return false; |
---|
1362 | } |
---|
1363 | return this.fly(el).findParent(this.rowSelector, this.rowSelectorDepth); |
---|
1364 | }, |
---|
1365 | |
---|
1366 | /** |
---|
1367 | * <p>Return the index of the grid row which contains the passed element.</p> |
---|
1368 | * See also {@link #findCellIndex} |
---|
1369 | * @param {Element} el The target element |
---|
1370 | * @return The row index, or <b>false</b> if the target element is not within a row of this GridView. |
---|
1371 | */ |
---|
1372 | findRowIndex : function(el){ |
---|
1373 | var r = this.findRow(el); |
---|
1374 | return r ? r.rowIndex : false; |
---|
1375 | }, |
---|
1376 | |
---|
1377 | // getter methods for fetching elements dynamically in the grid |
---|
1378 | |
---|
1379 | /** |
---|
1380 | * Return the <tt><div></tt> HtmlElement which represents a Grid row for the specified index. |
---|
1381 | * @param {Number} index The row index |
---|
1382 | * @return {HtmlElement} The div element. |
---|
1383 | */ |
---|
1384 | getRow : function(row){ |
---|
1385 | return this.getRows()[row]; |
---|
1386 | }, |
---|
1387 | |
---|
1388 | /** |
---|
1389 | * Returns the grid's <tt><td></tt> HtmlElement at the specified coordinates. |
---|
1390 | * @param {Number} row The row index in which to find the cell. |
---|
1391 | * @param {Number} col The column index of the cell. |
---|
1392 | * @return {HtmlElement} The td at the specified coordinates. |
---|
1393 | */ |
---|
1394 | getCell : function(row, col){ |
---|
1395 | return this.getRow(row).getElementsByTagName('td')[col]; |
---|
1396 | }, |
---|
1397 | |
---|
1398 | /** |
---|
1399 | * Return the <tt><td></tt> HtmlElement which represents the Grid's header cell for the specified column index. |
---|
1400 | * @param {Number} index The column index |
---|
1401 | * @return {HtmlElement} The td element. |
---|
1402 | */ |
---|
1403 | getHeaderCell : function(index){ |
---|
1404 | return this.mainHd.dom.getElementsByTagName('td')[index]; |
---|
1405 | }, |
---|
1406 | |
---|
1407 | // manipulating elements |
---|
1408 | |
---|
1409 | // private - use getRowClass to apply custom row classes |
---|
1410 | addRowClass : function(row, cls){ |
---|
1411 | var r = this.getRow(row); |
---|
1412 | if(r){ |
---|
1413 | this.fly(r).addClass(cls); |
---|
1414 | } |
---|
1415 | }, |
---|
1416 | |
---|
1417 | // private |
---|
1418 | removeRowClass : function(row, cls){ |
---|
1419 | var r = this.getRow(row); |
---|
1420 | if(r){ |
---|
1421 | this.fly(r).removeClass(cls); |
---|
1422 | } |
---|
1423 | }, |
---|
1424 | |
---|
1425 | // private |
---|
1426 | removeRow : function(row){ |
---|
1427 | Ext.removeNode(this.getRow(row)); |
---|
1428 | this.syncFocusEl(row); |
---|
1429 | }, |
---|
1430 | |
---|
1431 | // private |
---|
1432 | removeRows : function(firstRow, lastRow){ |
---|
1433 | var bd = this.mainBody.dom; |
---|
1434 | for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){ |
---|
1435 | Ext.removeNode(bd.childNodes[firstRow]); |
---|
1436 | } |
---|
1437 | this.syncFocusEl(firstRow); |
---|
1438 | }, |
---|
1439 | |
---|
1440 | // scrolling stuff |
---|
1441 | |
---|
1442 | // private |
---|
1443 | getScrollState : function(){ |
---|
1444 | var sb = this.scroller.dom; |
---|
1445 | return {left: sb.scrollLeft, top: sb.scrollTop}; |
---|
1446 | }, |
---|
1447 | |
---|
1448 | // private |
---|
1449 | restoreScroll : function(state){ |
---|
1450 | var sb = this.scroller.dom; |
---|
1451 | sb.scrollLeft = state.left; |
---|
1452 | sb.scrollTop = state.top; |
---|
1453 | }, |
---|
1454 | |
---|
1455 | /** |
---|
1456 | * Scrolls the grid to the top |
---|
1457 | */ |
---|
1458 | scrollToTop : function(){ |
---|
1459 | this.scroller.dom.scrollTop = 0; |
---|
1460 | this.scroller.dom.scrollLeft = 0; |
---|
1461 | }, |
---|
1462 | |
---|
1463 | // private |
---|
1464 | syncScroll : function(){ |
---|
1465 | this.syncHeaderScroll(); |
---|
1466 | var mb = this.scroller.dom; |
---|
1467 | this.grid.fireEvent("bodyscroll", mb.scrollLeft, mb.scrollTop); |
---|
1468 | }, |
---|
1469 | |
---|
1470 | // private |
---|
1471 | syncHeaderScroll : function(){ |
---|
1472 | var mb = this.scroller.dom; |
---|
1473 | this.innerHd.scrollLeft = mb.scrollLeft; |
---|
1474 | this.innerHd.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore) |
---|
1475 | }, |
---|
1476 | |
---|
1477 | // private |
---|
1478 | updateSortIcon : function(col, dir){ |
---|
1479 | var sc = this.sortClasses; |
---|
1480 | var hds = this.mainHd.select('td').removeClass(sc); |
---|
1481 | hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]); |
---|
1482 | }, |
---|
1483 | |
---|
1484 | // private |
---|
1485 | updateAllColumnWidths : function(){ |
---|
1486 | var tw = this.getTotalWidth(), |
---|
1487 | clen = this.cm.getColumnCount(), |
---|
1488 | ws = [], |
---|
1489 | len, |
---|
1490 | i; |
---|
1491 | for(i = 0; i < clen; i++){ |
---|
1492 | ws[i] = this.getColumnWidth(i); |
---|
1493 | } |
---|
1494 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
1495 | this.innerHd.firstChild.firstChild.style.width = tw; |
---|
1496 | this.mainBody.dom.style.width = tw; |
---|
1497 | for(i = 0; i < clen; i++){ |
---|
1498 | var hd = this.getHeaderCell(i); |
---|
1499 | hd.style.width = ws[i]; |
---|
1500 | } |
---|
1501 | |
---|
1502 | var ns = this.getRows(), row, trow; |
---|
1503 | for(i = 0, len = ns.length; i < len; i++){ |
---|
1504 | row = ns[i]; |
---|
1505 | row.style.width = tw; |
---|
1506 | if(row.firstChild){ |
---|
1507 | row.firstChild.style.width = tw; |
---|
1508 | trow = row.firstChild.rows[0]; |
---|
1509 | for (var j = 0; j < clen; j++) { |
---|
1510 | trow.childNodes[j].style.width = ws[j]; |
---|
1511 | } |
---|
1512 | } |
---|
1513 | } |
---|
1514 | |
---|
1515 | this.onAllColumnWidthsUpdated(ws, tw); |
---|
1516 | }, |
---|
1517 | |
---|
1518 | // private |
---|
1519 | updateColumnWidth : function(col, width){ |
---|
1520 | var w = this.getColumnWidth(col); |
---|
1521 | var tw = this.getTotalWidth(); |
---|
1522 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
1523 | this.innerHd.firstChild.firstChild.style.width = tw; |
---|
1524 | this.mainBody.dom.style.width = tw; |
---|
1525 | var hd = this.getHeaderCell(col); |
---|
1526 | hd.style.width = w; |
---|
1527 | |
---|
1528 | var ns = this.getRows(), row; |
---|
1529 | for(var i = 0, len = ns.length; i < len; i++){ |
---|
1530 | row = ns[i]; |
---|
1531 | row.style.width = tw; |
---|
1532 | if(row.firstChild){ |
---|
1533 | row.firstChild.style.width = tw; |
---|
1534 | row.firstChild.rows[0].childNodes[col].style.width = w; |
---|
1535 | } |
---|
1536 | } |
---|
1537 | |
---|
1538 | this.onColumnWidthUpdated(col, w, tw); |
---|
1539 | }, |
---|
1540 | |
---|
1541 | // private |
---|
1542 | updateColumnHidden : function(col, hidden){ |
---|
1543 | var tw = this.getTotalWidth(); |
---|
1544 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
1545 | this.innerHd.firstChild.firstChild.style.width = tw; |
---|
1546 | this.mainBody.dom.style.width = tw; |
---|
1547 | var display = hidden ? 'none' : ''; |
---|
1548 | |
---|
1549 | var hd = this.getHeaderCell(col); |
---|
1550 | hd.style.display = display; |
---|
1551 | |
---|
1552 | var ns = this.getRows(), row; |
---|
1553 | for(var i = 0, len = ns.length; i < len; i++){ |
---|
1554 | row = ns[i]; |
---|
1555 | row.style.width = tw; |
---|
1556 | if(row.firstChild){ |
---|
1557 | row.firstChild.style.width = tw; |
---|
1558 | row.firstChild.rows[0].childNodes[col].style.display = display; |
---|
1559 | } |
---|
1560 | } |
---|
1561 | |
---|
1562 | this.onColumnHiddenUpdated(col, hidden, tw); |
---|
1563 | delete this.lastViewWidth; // force recalc |
---|
1564 | this.layout(); |
---|
1565 | }, |
---|
1566 | |
---|
1567 | // private |
---|
1568 | doRender : function(cs, rs, ds, startRow, colCount, stripe){ |
---|
1569 | var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1; |
---|
1570 | var tstyle = 'width:'+this.getTotalWidth()+';'; |
---|
1571 | // buffers |
---|
1572 | var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r; |
---|
1573 | for(var j = 0, len = rs.length; j < len; j++){ |
---|
1574 | r = rs[j]; cb = []; |
---|
1575 | var rowIndex = (j+startRow); |
---|
1576 | for(var i = 0; i < colCount; i++){ |
---|
1577 | c = cs[i]; |
---|
1578 | p.id = c.id; |
---|
1579 | p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); |
---|
1580 | p.attr = p.cellAttr = ""; |
---|
1581 | p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds); |
---|
1582 | p.style = c.style; |
---|
1583 | if(Ext.isEmpty(p.value)){ |
---|
1584 | p.value = " "; |
---|
1585 | } |
---|
1586 | if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){ |
---|
1587 | p.css += ' x-grid3-dirty-cell'; |
---|
1588 | } |
---|
1589 | cb[cb.length] = ct.apply(p); |
---|
1590 | } |
---|
1591 | var alt = []; |
---|
1592 | if(stripe && ((rowIndex+1) % 2 === 0)){ |
---|
1593 | alt[0] = "x-grid3-row-alt"; |
---|
1594 | } |
---|
1595 | if(r.dirty){ |
---|
1596 | alt[1] = " x-grid3-dirty-row"; |
---|
1597 | } |
---|
1598 | rp.cols = colCount; |
---|
1599 | if(this.getRowClass){ |
---|
1600 | alt[2] = this.getRowClass(r, rowIndex, rp, ds); |
---|
1601 | } |
---|
1602 | rp.alt = alt.join(" "); |
---|
1603 | rp.cells = cb.join(""); |
---|
1604 | buf[buf.length] = rt.apply(rp); |
---|
1605 | } |
---|
1606 | return buf.join(""); |
---|
1607 | }, |
---|
1608 | |
---|
1609 | // private |
---|
1610 | processRows : function(startRow, skipStripe){ |
---|
1611 | if(!this.ds || this.ds.getCount() < 1){ |
---|
1612 | return; |
---|
1613 | } |
---|
1614 | var rows = this.getRows(); |
---|
1615 | skipStripe = skipStripe || !this.grid.stripeRows; |
---|
1616 | startRow = startRow || 0; |
---|
1617 | Ext.each(rows, function(row, idx){ |
---|
1618 | row.rowIndex = idx; |
---|
1619 | row.className = row.className.replace(this.rowClsRe, ' '); |
---|
1620 | if (!skipStripe && (idx + 1) % 2 === 0) { |
---|
1621 | row.className += ' x-grid3-row-alt'; |
---|
1622 | } |
---|
1623 | }); |
---|
1624 | // add first/last-row classes |
---|
1625 | if(startRow === 0){ |
---|
1626 | Ext.fly(rows[0]).addClass(this.firstRowCls); |
---|
1627 | } |
---|
1628 | Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls); |
---|
1629 | }, |
---|
1630 | |
---|
1631 | afterRender : function(){ |
---|
1632 | if(!this.ds || !this.cm){ |
---|
1633 | return; |
---|
1634 | } |
---|
1635 | this.mainBody.dom.innerHTML = this.renderRows() || ' '; |
---|
1636 | this.processRows(0, true); |
---|
1637 | |
---|
1638 | if(this.deferEmptyText !== true){ |
---|
1639 | this.applyEmptyText(); |
---|
1640 | } |
---|
1641 | }, |
---|
1642 | |
---|
1643 | // private |
---|
1644 | renderUI : function(){ |
---|
1645 | |
---|
1646 | var header = this.renderHeaders(); |
---|
1647 | var body = this.templates.body.apply({rows:' '}); |
---|
1648 | |
---|
1649 | |
---|
1650 | var html = this.templates.master.apply({ |
---|
1651 | body: body, |
---|
1652 | header: header, |
---|
1653 | ostyle: 'width:'+this.getOffsetWidth()+';', |
---|
1654 | bstyle: 'width:'+this.getTotalWidth()+';' |
---|
1655 | }); |
---|
1656 | |
---|
1657 | var g = this.grid; |
---|
1658 | |
---|
1659 | g.getGridEl().dom.innerHTML = html; |
---|
1660 | |
---|
1661 | this.initElements(); |
---|
1662 | |
---|
1663 | // get mousedowns early |
---|
1664 | Ext.fly(this.innerHd).on("click", this.handleHdDown, this); |
---|
1665 | this.mainHd.on({ |
---|
1666 | scope: this, |
---|
1667 | mouseover: this.handleHdOver, |
---|
1668 | mouseout: this.handleHdOut, |
---|
1669 | mousemove: this.handleHdMove |
---|
1670 | }); |
---|
1671 | |
---|
1672 | this.scroller.on('scroll', this.syncScroll, this); |
---|
1673 | if(g.enableColumnResize !== false){ |
---|
1674 | this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom); |
---|
1675 | } |
---|
1676 | |
---|
1677 | if(g.enableColumnMove){ |
---|
1678 | this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd); |
---|
1679 | this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom); |
---|
1680 | } |
---|
1681 | |
---|
1682 | if(g.enableHdMenu !== false){ |
---|
1683 | this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"}); |
---|
1684 | this.hmenu.add( |
---|
1685 | {itemId:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"}, |
---|
1686 | {itemId:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"} |
---|
1687 | ); |
---|
1688 | if(g.enableColumnHide !== false){ |
---|
1689 | this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"}); |
---|
1690 | this.colMenu.on({ |
---|
1691 | scope: this, |
---|
1692 | beforeshow: this.beforeColMenuShow, |
---|
1693 | itemclick: this.handleHdMenuClick |
---|
1694 | }); |
---|
1695 | this.hmenu.add('-', { |
---|
1696 | itemId:"columns", |
---|
1697 | hideOnClick: false, |
---|
1698 | text: this.columnsText, |
---|
1699 | menu: this.colMenu, |
---|
1700 | iconCls: 'x-cols-icon' |
---|
1701 | }); |
---|
1702 | } |
---|
1703 | this.hmenu.on("itemclick", this.handleHdMenuClick, this); |
---|
1704 | } |
---|
1705 | |
---|
1706 | if(g.trackMouseOver){ |
---|
1707 | this.mainBody.on({ |
---|
1708 | scope: this, |
---|
1709 | mouseover: this.onRowOver, |
---|
1710 | mouseout: this.onRowOut |
---|
1711 | }); |
---|
1712 | } |
---|
1713 | |
---|
1714 | if(g.enableDragDrop || g.enableDrag){ |
---|
1715 | this.dragZone = new Ext.grid.GridDragZone(g, { |
---|
1716 | ddGroup : g.ddGroup || 'GridDD' |
---|
1717 | }); |
---|
1718 | } |
---|
1719 | |
---|
1720 | this.updateHeaderSortState(); |
---|
1721 | |
---|
1722 | }, |
---|
1723 | |
---|
1724 | // private |
---|
1725 | layout : function(){ |
---|
1726 | if(!this.mainBody){ |
---|
1727 | return; // not rendered |
---|
1728 | } |
---|
1729 | var g = this.grid; |
---|
1730 | var c = g.getGridEl(); |
---|
1731 | var csize = c.getSize(true); |
---|
1732 | var vw = csize.width; |
---|
1733 | |
---|
1734 | if(!g.hideHeaders && (vw < 20 || csize.height < 20)){ // display: none? |
---|
1735 | return; |
---|
1736 | } |
---|
1737 | |
---|
1738 | if(g.autoHeight){ |
---|
1739 | this.scroller.dom.style.overflow = 'visible'; |
---|
1740 | if(Ext.isWebKit){ |
---|
1741 | this.scroller.dom.style.position = 'static'; |
---|
1742 | } |
---|
1743 | }else{ |
---|
1744 | this.el.setSize(csize.width, csize.height); |
---|
1745 | |
---|
1746 | var hdHeight = this.mainHd.getHeight(); |
---|
1747 | var vh = csize.height - (hdHeight); |
---|
1748 | |
---|
1749 | this.scroller.setSize(vw, vh); |
---|
1750 | if(this.innerHd){ |
---|
1751 | this.innerHd.style.width = (vw)+'px'; |
---|
1752 | } |
---|
1753 | } |
---|
1754 | if(this.forceFit){ |
---|
1755 | if(this.lastViewWidth != vw){ |
---|
1756 | this.fitColumns(false, false); |
---|
1757 | this.lastViewWidth = vw; |
---|
1758 | } |
---|
1759 | }else { |
---|
1760 | this.autoExpand(); |
---|
1761 | this.syncHeaderScroll(); |
---|
1762 | } |
---|
1763 | this.onLayout(vw, vh); |
---|
1764 | }, |
---|
1765 | |
---|
1766 | // template functions for subclasses and plugins |
---|
1767 | // these functions include precalculated values |
---|
1768 | onLayout : function(vw, vh){ |
---|
1769 | // do nothing |
---|
1770 | }, |
---|
1771 | |
---|
1772 | onColumnWidthUpdated : function(col, w, tw){ |
---|
1773 | //template method |
---|
1774 | }, |
---|
1775 | |
---|
1776 | onAllColumnWidthsUpdated : function(ws, tw){ |
---|
1777 | //template method |
---|
1778 | }, |
---|
1779 | |
---|
1780 | onColumnHiddenUpdated : function(col, hidden, tw){ |
---|
1781 | // template method |
---|
1782 | }, |
---|
1783 | |
---|
1784 | updateColumnText : function(col, text){ |
---|
1785 | // template method |
---|
1786 | }, |
---|
1787 | |
---|
1788 | afterMove : function(colIndex){ |
---|
1789 | // template method |
---|
1790 | }, |
---|
1791 | |
---|
1792 | /* ----------------------------------- Core Specific -------------------------------------------*/ |
---|
1793 | // private |
---|
1794 | init : function(grid){ |
---|
1795 | this.grid = grid; |
---|
1796 | |
---|
1797 | this.initTemplates(); |
---|
1798 | this.initData(grid.store, grid.colModel); |
---|
1799 | this.initUI(grid); |
---|
1800 | }, |
---|
1801 | |
---|
1802 | // private |
---|
1803 | getColumnId : function(index){ |
---|
1804 | return this.cm.getColumnId(index); |
---|
1805 | }, |
---|
1806 | |
---|
1807 | // private |
---|
1808 | getOffsetWidth : function() { |
---|
1809 | return (this.cm.getTotalWidth() + this.scrollOffset) + 'px'; |
---|
1810 | }, |
---|
1811 | |
---|
1812 | // private |
---|
1813 | renderHeaders : function(){ |
---|
1814 | var cm = this.cm, |
---|
1815 | ts = this.templates, |
---|
1816 | ct = ts.hcell, |
---|
1817 | cb = [], |
---|
1818 | p = {}, |
---|
1819 | len = cm.getColumnCount(), |
---|
1820 | last = len - 1; |
---|
1821 | |
---|
1822 | for(var i = 0; i < len; i++){ |
---|
1823 | p.id = cm.getColumnId(i); |
---|
1824 | p.value = cm.getColumnHeader(i) || ""; |
---|
1825 | p.style = this.getColumnStyle(i, true); |
---|
1826 | p.tooltip = this.getColumnTooltip(i); |
---|
1827 | p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); |
---|
1828 | if(cm.config[i].align == 'right'){ |
---|
1829 | p.istyle = 'padding-right:16px'; |
---|
1830 | } else { |
---|
1831 | delete p.istyle; |
---|
1832 | } |
---|
1833 | cb[cb.length] = ct.apply(p); |
---|
1834 | } |
---|
1835 | return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'}); |
---|
1836 | }, |
---|
1837 | |
---|
1838 | // private |
---|
1839 | getColumnTooltip : function(i){ |
---|
1840 | var tt = this.cm.getColumnTooltip(i); |
---|
1841 | if(tt){ |
---|
1842 | if(Ext.QuickTips.isEnabled()){ |
---|
1843 | return 'ext:qtip="'+tt+'"'; |
---|
1844 | }else{ |
---|
1845 | return 'title="'+tt+'"'; |
---|
1846 | } |
---|
1847 | } |
---|
1848 | return ""; |
---|
1849 | }, |
---|
1850 | |
---|
1851 | // private |
---|
1852 | beforeUpdate : function(){ |
---|
1853 | this.grid.stopEditing(true); |
---|
1854 | }, |
---|
1855 | |
---|
1856 | // private |
---|
1857 | updateHeaders : function(){ |
---|
1858 | this.innerHd.firstChild.innerHTML = this.renderHeaders(); |
---|
1859 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
1860 | this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth(); |
---|
1861 | }, |
---|
1862 | |
---|
1863 | /** |
---|
1864 | * Focuses the specified row. |
---|
1865 | * @param {Number} row The row index |
---|
1866 | */ |
---|
1867 | focusRow : function(row){ |
---|
1868 | this.focusCell(row, 0, false); |
---|
1869 | }, |
---|
1870 | |
---|
1871 | /** |
---|
1872 | * Focuses the specified cell. |
---|
1873 | * @param {Number} row The row index |
---|
1874 | * @param {Number} col The column index |
---|
1875 | */ |
---|
1876 | focusCell : function(row, col, hscroll){ |
---|
1877 | this.syncFocusEl(this.ensureVisible(row, col, hscroll)); |
---|
1878 | if(Ext.isGecko){ |
---|
1879 | this.focusEl.focus(); |
---|
1880 | }else{ |
---|
1881 | this.focusEl.focus.defer(1, this.focusEl); |
---|
1882 | } |
---|
1883 | }, |
---|
1884 | |
---|
1885 | resolveCell : function(row, col, hscroll){ |
---|
1886 | if(typeof row != "number"){ |
---|
1887 | row = row.rowIndex; |
---|
1888 | } |
---|
1889 | if(!this.ds){ |
---|
1890 | return null; |
---|
1891 | } |
---|
1892 | if(row < 0 || row >= this.ds.getCount()){ |
---|
1893 | return null; |
---|
1894 | } |
---|
1895 | col = (col !== undefined ? col : 0); |
---|
1896 | |
---|
1897 | var rowEl = this.getRow(row), |
---|
1898 | cm = this.cm, |
---|
1899 | colCount = cm.getColumnCount(), |
---|
1900 | cellEl; |
---|
1901 | if(!(hscroll === false && col === 0)){ |
---|
1902 | while(col < colCount && cm.isHidden(col)){ |
---|
1903 | col++; |
---|
1904 | } |
---|
1905 | cellEl = this.getCell(row, col); |
---|
1906 | } |
---|
1907 | |
---|
1908 | return {row: rowEl, cell: cellEl}; |
---|
1909 | }, |
---|
1910 | |
---|
1911 | getResolvedXY : function(resolved){ |
---|
1912 | if(!resolved){ |
---|
1913 | return null; |
---|
1914 | } |
---|
1915 | var s = this.scroller.dom, c = resolved.cell, r = resolved.row; |
---|
1916 | return c ? Ext.fly(c).getXY() : [this.el.getX(), Ext.fly(r).getY()]; |
---|
1917 | }, |
---|
1918 | |
---|
1919 | syncFocusEl : function(row, col, hscroll){ |
---|
1920 | var xy = row; |
---|
1921 | if(!Ext.isArray(xy)){ |
---|
1922 | row = Math.min(row, Math.max(0, this.getRows().length-1)); |
---|
1923 | xy = this.getResolvedXY(this.resolveCell(row, col, hscroll)); |
---|
1924 | } |
---|
1925 | this.focusEl.setXY(xy||this.scroller.getXY()); |
---|
1926 | }, |
---|
1927 | |
---|
1928 | ensureVisible : function(row, col, hscroll){ |
---|
1929 | var resolved = this.resolveCell(row, col, hscroll); |
---|
1930 | if(!resolved || !resolved.row){ |
---|
1931 | return; |
---|
1932 | } |
---|
1933 | |
---|
1934 | var rowEl = resolved.row, |
---|
1935 | cellEl = resolved.cell, |
---|
1936 | c = this.scroller.dom, |
---|
1937 | ctop = 0, |
---|
1938 | p = rowEl, |
---|
1939 | stop = this.el.dom; |
---|
1940 | |
---|
1941 | while(p && p != stop){ |
---|
1942 | ctop += p.offsetTop; |
---|
1943 | p = p.offsetParent; |
---|
1944 | } |
---|
1945 | ctop -= this.mainHd.dom.offsetHeight; |
---|
1946 | |
---|
1947 | var cbot = ctop + rowEl.offsetHeight, |
---|
1948 | ch = c.clientHeight, |
---|
1949 | sbot = stop + ch; |
---|
1950 | |
---|
1951 | stop = parseInt(c.scrollTop, 10); |
---|
1952 | |
---|
1953 | |
---|
1954 | if(ctop < stop){ |
---|
1955 | c.scrollTop = ctop; |
---|
1956 | }else if(cbot > sbot){ |
---|
1957 | c.scrollTop = cbot-ch; |
---|
1958 | } |
---|
1959 | |
---|
1960 | if(hscroll !== false){ |
---|
1961 | var cleft = parseInt(cellEl.offsetLeft, 10); |
---|
1962 | var cright = cleft + cellEl.offsetWidth; |
---|
1963 | |
---|
1964 | var sleft = parseInt(c.scrollLeft, 10); |
---|
1965 | var sright = sleft + c.clientWidth; |
---|
1966 | if(cleft < sleft){ |
---|
1967 | c.scrollLeft = cleft; |
---|
1968 | }else if(cright > sright){ |
---|
1969 | c.scrollLeft = cright-c.clientWidth; |
---|
1970 | } |
---|
1971 | } |
---|
1972 | return this.getResolvedXY(resolved); |
---|
1973 | }, |
---|
1974 | |
---|
1975 | // private |
---|
1976 | insertRows : function(dm, firstRow, lastRow, isUpdate){ |
---|
1977 | var last = dm.getCount() - 1; |
---|
1978 | if(!isUpdate && firstRow === 0 && lastRow >= last){ |
---|
1979 | this.refresh(); |
---|
1980 | }else{ |
---|
1981 | if(!isUpdate){ |
---|
1982 | this.fireEvent("beforerowsinserted", this, firstRow, lastRow); |
---|
1983 | } |
---|
1984 | var html = this.renderRows(firstRow, lastRow), |
---|
1985 | before = this.getRow(firstRow); |
---|
1986 | if(before){ |
---|
1987 | if(firstRow === 0){ |
---|
1988 | Ext.fly(this.getRow(0)).removeClass(this.firstRowCls); |
---|
1989 | } |
---|
1990 | Ext.DomHelper.insertHtml('beforeBegin', before, html); |
---|
1991 | }else{ |
---|
1992 | var r = this.getRow(last - 1); |
---|
1993 | if(r){ |
---|
1994 | Ext.fly(r).removeClass(this.lastRowCls); |
---|
1995 | } |
---|
1996 | Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html); |
---|
1997 | } |
---|
1998 | if(!isUpdate){ |
---|
1999 | this.fireEvent("rowsinserted", this, firstRow, lastRow); |
---|
2000 | this.processRows(firstRow); |
---|
2001 | }else if(firstRow === 0 || firstRow >= last){ |
---|
2002 | //ensure first/last row is kept after an update. |
---|
2003 | Ext.fly(this.getRow(firstRow)).addClass(firstRow === 0 ? this.firstRowCls : this.lastRowCls); |
---|
2004 | } |
---|
2005 | } |
---|
2006 | this.syncFocusEl(firstRow); |
---|
2007 | }, |
---|
2008 | |
---|
2009 | // private |
---|
2010 | deleteRows : function(dm, firstRow, lastRow){ |
---|
2011 | if(dm.getRowCount()<1){ |
---|
2012 | this.refresh(); |
---|
2013 | }else{ |
---|
2014 | this.fireEvent("beforerowsdeleted", this, firstRow, lastRow); |
---|
2015 | |
---|
2016 | this.removeRows(firstRow, lastRow); |
---|
2017 | |
---|
2018 | this.processRows(firstRow); |
---|
2019 | this.fireEvent("rowsdeleted", this, firstRow, lastRow); |
---|
2020 | } |
---|
2021 | }, |
---|
2022 | |
---|
2023 | // private |
---|
2024 | getColumnStyle : function(col, isHeader){ |
---|
2025 | var style = !isHeader ? (this.cm.config[col].css || '') : ''; |
---|
2026 | style += 'width:'+this.getColumnWidth(col)+';'; |
---|
2027 | if(this.cm.isHidden(col)){ |
---|
2028 | style += 'display:none;'; |
---|
2029 | } |
---|
2030 | var align = this.cm.config[col].align; |
---|
2031 | if(align){ |
---|
2032 | style += 'text-align:'+align+';'; |
---|
2033 | } |
---|
2034 | return style; |
---|
2035 | }, |
---|
2036 | |
---|
2037 | // private |
---|
2038 | getColumnWidth : function(col){ |
---|
2039 | var w = this.cm.getColumnWidth(col); |
---|
2040 | if(typeof w == 'number'){ |
---|
2041 | return (Ext.isBorderBox ? w : (w-this.borderWidth > 0 ? w-this.borderWidth:0)) + 'px'; |
---|
2042 | } |
---|
2043 | return w; |
---|
2044 | }, |
---|
2045 | |
---|
2046 | // private |
---|
2047 | getTotalWidth : function(){ |
---|
2048 | return this.cm.getTotalWidth()+'px'; |
---|
2049 | }, |
---|
2050 | |
---|
2051 | // private |
---|
2052 | fitColumns : function(preventRefresh, onlyExpand, omitColumn){ |
---|
2053 | var cm = this.cm, i; |
---|
2054 | var tw = cm.getTotalWidth(false); |
---|
2055 | var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset; |
---|
2056 | |
---|
2057 | if(aw < 20){ // not initialized, so don't screw up the default widths |
---|
2058 | return; |
---|
2059 | } |
---|
2060 | var extra = aw - tw; |
---|
2061 | |
---|
2062 | if(extra === 0){ |
---|
2063 | return false; |
---|
2064 | } |
---|
2065 | |
---|
2066 | var vc = cm.getColumnCount(true); |
---|
2067 | var ac = vc-(typeof omitColumn == 'number' ? 1 : 0); |
---|
2068 | if(ac === 0){ |
---|
2069 | ac = 1; |
---|
2070 | omitColumn = undefined; |
---|
2071 | } |
---|
2072 | var colCount = cm.getColumnCount(); |
---|
2073 | var cols = []; |
---|
2074 | var extraCol = 0; |
---|
2075 | var width = 0; |
---|
2076 | var w; |
---|
2077 | for (i = 0; i < colCount; i++){ |
---|
2078 | if(!cm.isHidden(i) && !cm.isFixed(i) && i !== omitColumn){ |
---|
2079 | w = cm.getColumnWidth(i); |
---|
2080 | cols.push(i); |
---|
2081 | extraCol = i; |
---|
2082 | cols.push(w); |
---|
2083 | width += w; |
---|
2084 | } |
---|
2085 | } |
---|
2086 | var frac = (aw - cm.getTotalWidth())/width; |
---|
2087 | while (cols.length){ |
---|
2088 | w = cols.pop(); |
---|
2089 | i = cols.pop(); |
---|
2090 | cm.setColumnWidth(i, Math.max(this.grid.minColumnWidth, Math.floor(w + w*frac)), true); |
---|
2091 | } |
---|
2092 | |
---|
2093 | if((tw = cm.getTotalWidth(false)) > aw){ |
---|
2094 | var adjustCol = ac != vc ? omitColumn : extraCol; |
---|
2095 | cm.setColumnWidth(adjustCol, Math.max(1, |
---|
2096 | cm.getColumnWidth(adjustCol)- (tw-aw)), true); |
---|
2097 | } |
---|
2098 | |
---|
2099 | if(preventRefresh !== true){ |
---|
2100 | this.updateAllColumnWidths(); |
---|
2101 | } |
---|
2102 | |
---|
2103 | |
---|
2104 | return true; |
---|
2105 | }, |
---|
2106 | |
---|
2107 | // private |
---|
2108 | autoExpand : function(preventUpdate){ |
---|
2109 | var g = this.grid, cm = this.cm; |
---|
2110 | if(!this.userResized && g.autoExpandColumn){ |
---|
2111 | var tw = cm.getTotalWidth(false); |
---|
2112 | var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset; |
---|
2113 | if(tw != aw){ |
---|
2114 | var ci = cm.getIndexById(g.autoExpandColumn); |
---|
2115 | var currentWidth = cm.getColumnWidth(ci); |
---|
2116 | var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax); |
---|
2117 | if(cw != currentWidth){ |
---|
2118 | cm.setColumnWidth(ci, cw, true); |
---|
2119 | if(preventUpdate !== true){ |
---|
2120 | this.updateColumnWidth(ci, cw); |
---|
2121 | } |
---|
2122 | } |
---|
2123 | } |
---|
2124 | } |
---|
2125 | }, |
---|
2126 | |
---|
2127 | // private |
---|
2128 | getColumnData : function(){ |
---|
2129 | // build a map for all the columns |
---|
2130 | var cs = [], cm = this.cm, colCount = cm.getColumnCount(); |
---|
2131 | for(var i = 0; i < colCount; i++){ |
---|
2132 | var name = cm.getDataIndex(i); |
---|
2133 | cs[i] = { |
---|
2134 | name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name), |
---|
2135 | renderer : cm.getRenderer(i), |
---|
2136 | id : cm.getColumnId(i), |
---|
2137 | style : this.getColumnStyle(i) |
---|
2138 | }; |
---|
2139 | } |
---|
2140 | return cs; |
---|
2141 | }, |
---|
2142 | |
---|
2143 | // private |
---|
2144 | renderRows : function(startRow, endRow){ |
---|
2145 | // pull in all the crap needed to render rows |
---|
2146 | var g = this.grid, cm = g.colModel, ds = g.store, stripe = g.stripeRows; |
---|
2147 | var colCount = cm.getColumnCount(); |
---|
2148 | |
---|
2149 | if(ds.getCount() < 1){ |
---|
2150 | return ""; |
---|
2151 | } |
---|
2152 | |
---|
2153 | var cs = this.getColumnData(); |
---|
2154 | |
---|
2155 | startRow = startRow || 0; |
---|
2156 | endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow; |
---|
2157 | |
---|
2158 | // records to render |
---|
2159 | var rs = ds.getRange(startRow, endRow); |
---|
2160 | |
---|
2161 | return this.doRender(cs, rs, ds, startRow, colCount, stripe); |
---|
2162 | }, |
---|
2163 | |
---|
2164 | // private |
---|
2165 | renderBody : function(){ |
---|
2166 | var markup = this.renderRows() || ' '; |
---|
2167 | return this.templates.body.apply({rows: markup}); |
---|
2168 | }, |
---|
2169 | |
---|
2170 | // private |
---|
2171 | refreshRow : function(record){ |
---|
2172 | var ds = this.ds, index; |
---|
2173 | if(typeof record == 'number'){ |
---|
2174 | index = record; |
---|
2175 | record = ds.getAt(index); |
---|
2176 | if(!record){ |
---|
2177 | return; |
---|
2178 | } |
---|
2179 | }else{ |
---|
2180 | index = ds.indexOf(record); |
---|
2181 | if(index < 0){ |
---|
2182 | return; |
---|
2183 | } |
---|
2184 | } |
---|
2185 | this.insertRows(ds, index, index, true); |
---|
2186 | this.getRow(index).rowIndex = index; |
---|
2187 | this.onRemove(ds, record, index+1, true); |
---|
2188 | this.fireEvent("rowupdated", this, index, record); |
---|
2189 | }, |
---|
2190 | |
---|
2191 | /** |
---|
2192 | * Refreshs the grid UI |
---|
2193 | * @param {Boolean} headersToo (optional) True to also refresh the headers |
---|
2194 | */ |
---|
2195 | refresh : function(headersToo){ |
---|
2196 | this.fireEvent("beforerefresh", this); |
---|
2197 | this.grid.stopEditing(true); |
---|
2198 | |
---|
2199 | var result = this.renderBody(); |
---|
2200 | this.mainBody.update(result).setWidth(this.getTotalWidth()); |
---|
2201 | if(headersToo === true){ |
---|
2202 | this.updateHeaders(); |
---|
2203 | this.updateHeaderSortState(); |
---|
2204 | } |
---|
2205 | this.processRows(0, true); |
---|
2206 | this.layout(); |
---|
2207 | this.applyEmptyText(); |
---|
2208 | this.fireEvent("refresh", this); |
---|
2209 | }, |
---|
2210 | |
---|
2211 | // private |
---|
2212 | applyEmptyText : function(){ |
---|
2213 | if(this.emptyText && !this.hasRows()){ |
---|
2214 | this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>'); |
---|
2215 | } |
---|
2216 | }, |
---|
2217 | |
---|
2218 | // private |
---|
2219 | updateHeaderSortState : function(){ |
---|
2220 | var state = this.ds.getSortState(); |
---|
2221 | if(!state){ |
---|
2222 | return; |
---|
2223 | } |
---|
2224 | if(!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)){ |
---|
2225 | this.grid.fireEvent('sortchange', this.grid, state); |
---|
2226 | } |
---|
2227 | this.sortState = state; |
---|
2228 | var sortColumn = this.cm.findColumnIndex(state.field); |
---|
2229 | if(sortColumn != -1){ |
---|
2230 | var sortDir = state.direction; |
---|
2231 | this.updateSortIcon(sortColumn, sortDir); |
---|
2232 | } |
---|
2233 | }, |
---|
2234 | |
---|
2235 | // private |
---|
2236 | destroy : function(){ |
---|
2237 | if(this.colMenu){ |
---|
2238 | Ext.menu.MenuMgr.unregister(this.colMenu); |
---|
2239 | this.colMenu.destroy(); |
---|
2240 | delete this.colMenu; |
---|
2241 | } |
---|
2242 | if(this.hmenu){ |
---|
2243 | Ext.menu.MenuMgr.unregister(this.hmenu); |
---|
2244 | this.hmenu.destroy(); |
---|
2245 | delete this.hmenu; |
---|
2246 | } |
---|
2247 | if(this.grid.enableColumnMove){ |
---|
2248 | var dds = Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id]; |
---|
2249 | if(dds){ |
---|
2250 | for(var dd in dds){ |
---|
2251 | if(!dds[dd].config.isTarget && dds[dd].dragElId){ |
---|
2252 | var elid = dds[dd].dragElId; |
---|
2253 | dds[dd].unreg(); |
---|
2254 | Ext.get(elid).remove(); |
---|
2255 | } else if(dds[dd].config.isTarget){ |
---|
2256 | dds[dd].proxyTop.remove(); |
---|
2257 | dds[dd].proxyBottom.remove(); |
---|
2258 | dds[dd].unreg(); |
---|
2259 | } |
---|
2260 | if(Ext.dd.DDM.locationCache[dd]){ |
---|
2261 | delete Ext.dd.DDM.locationCache[dd]; |
---|
2262 | } |
---|
2263 | } |
---|
2264 | delete Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id]; |
---|
2265 | } |
---|
2266 | } |
---|
2267 | |
---|
2268 | if(this.dragZone){ |
---|
2269 | this.dragZone.unreg(); |
---|
2270 | } |
---|
2271 | |
---|
2272 | Ext.fly(this.innerHd).removeAllListeners(); |
---|
2273 | Ext.removeNode(this.innerHd); |
---|
2274 | |
---|
2275 | Ext.destroy(this.resizeMarker, this.resizeProxy, this.focusEl, this.mainBody, |
---|
2276 | this.scroller, this.mainHd, this.mainWrap, this.dragZone, |
---|
2277 | this.splitZone, this.columnDrag, this.columnDrop); |
---|
2278 | |
---|
2279 | this.initData(null, null); |
---|
2280 | Ext.EventManager.removeResizeListener(this.onWindowResize, this); |
---|
2281 | this.purgeListeners(); |
---|
2282 | }, |
---|
2283 | |
---|
2284 | // private |
---|
2285 | onDenyColumnHide : function(){ |
---|
2286 | |
---|
2287 | }, |
---|
2288 | |
---|
2289 | // private |
---|
2290 | render : function(){ |
---|
2291 | if(this.autoFill){ |
---|
2292 | var ct = this.grid.ownerCt; |
---|
2293 | if (ct && ct.getLayout()){ |
---|
2294 | ct.on('afterlayout', function(){ |
---|
2295 | this.fitColumns(true, true); |
---|
2296 | this.updateHeaders(); |
---|
2297 | }, this, {single: true}); |
---|
2298 | }else{ |
---|
2299 | this.fitColumns(true, true); |
---|
2300 | } |
---|
2301 | }else if(this.forceFit){ |
---|
2302 | this.fitColumns(true, false); |
---|
2303 | }else if(this.grid.autoExpandColumn){ |
---|
2304 | this.autoExpand(true); |
---|
2305 | } |
---|
2306 | |
---|
2307 | this.renderUI(); |
---|
2308 | }, |
---|
2309 | |
---|
2310 | /* --------------------------------- Model Events and Handlers --------------------------------*/ |
---|
2311 | // private |
---|
2312 | initData : function(ds, cm){ |
---|
2313 | if(this.ds){ |
---|
2314 | this.ds.un("load", this.onLoad, this); |
---|
2315 | this.ds.un("datachanged", this.onDataChange, this); |
---|
2316 | this.ds.un("add", this.onAdd, this); |
---|
2317 | this.ds.un("remove", this.onRemove, this); |
---|
2318 | this.ds.un("update", this.onUpdate, this); |
---|
2319 | this.ds.un("clear", this.onClear, this); |
---|
2320 | if(this.ds !== ds && this.ds.autoDestroy){ |
---|
2321 | this.ds.destroy(); |
---|
2322 | } |
---|
2323 | } |
---|
2324 | if(ds){ |
---|
2325 | ds.on({ |
---|
2326 | scope: this, |
---|
2327 | load: this.onLoad, |
---|
2328 | datachanged: this.onDataChange, |
---|
2329 | add: this.onAdd, |
---|
2330 | remove: this.onRemove, |
---|
2331 | update: this.onUpdate, |
---|
2332 | clear: this.onClear |
---|
2333 | }); |
---|
2334 | } |
---|
2335 | this.ds = ds; |
---|
2336 | |
---|
2337 | if(this.cm){ |
---|
2338 | this.cm.un("configchange", this.onColConfigChange, this); |
---|
2339 | this.cm.un("widthchange", this.onColWidthChange, this); |
---|
2340 | this.cm.un("headerchange", this.onHeaderChange, this); |
---|
2341 | this.cm.un("hiddenchange", this.onHiddenChange, this); |
---|
2342 | this.cm.un("columnmoved", this.onColumnMove, this); |
---|
2343 | } |
---|
2344 | if(cm){ |
---|
2345 | delete this.lastViewWidth; |
---|
2346 | cm.on({ |
---|
2347 | scope: this, |
---|
2348 | configchange: this.onColConfigChange, |
---|
2349 | widthchange: this.onColWidthChange, |
---|
2350 | headerchange: this.onHeaderChange, |
---|
2351 | hiddenchange: this.onHiddenChange, |
---|
2352 | columnmoved: this.onColumnMove |
---|
2353 | }); |
---|
2354 | } |
---|
2355 | this.cm = cm; |
---|
2356 | }, |
---|
2357 | |
---|
2358 | // private |
---|
2359 | onDataChange : function(){ |
---|
2360 | this.refresh(); |
---|
2361 | this.updateHeaderSortState(); |
---|
2362 | this.syncFocusEl(0); |
---|
2363 | }, |
---|
2364 | |
---|
2365 | // private |
---|
2366 | onClear : function(){ |
---|
2367 | this.refresh(); |
---|
2368 | this.syncFocusEl(0); |
---|
2369 | }, |
---|
2370 | |
---|
2371 | // private |
---|
2372 | onUpdate : function(ds, record){ |
---|
2373 | this.refreshRow(record); |
---|
2374 | }, |
---|
2375 | |
---|
2376 | // private |
---|
2377 | onAdd : function(ds, records, index){ |
---|
2378 | this.insertRows(ds, index, index + (records.length-1)); |
---|
2379 | }, |
---|
2380 | |
---|
2381 | // private |
---|
2382 | onRemove : function(ds, record, index, isUpdate){ |
---|
2383 | if(isUpdate !== true){ |
---|
2384 | this.fireEvent("beforerowremoved", this, index, record); |
---|
2385 | } |
---|
2386 | this.removeRow(index); |
---|
2387 | if(isUpdate !== true){ |
---|
2388 | this.processRows(index); |
---|
2389 | this.applyEmptyText(); |
---|
2390 | this.fireEvent("rowremoved", this, index, record); |
---|
2391 | } |
---|
2392 | }, |
---|
2393 | |
---|
2394 | // private |
---|
2395 | onLoad : function(){ |
---|
2396 | this.scrollToTop(); |
---|
2397 | }, |
---|
2398 | |
---|
2399 | // private |
---|
2400 | onColWidthChange : function(cm, col, width){ |
---|
2401 | this.updateColumnWidth(col, width); |
---|
2402 | }, |
---|
2403 | |
---|
2404 | // private |
---|
2405 | onHeaderChange : function(cm, col, text){ |
---|
2406 | this.updateHeaders(); |
---|
2407 | }, |
---|
2408 | |
---|
2409 | // private |
---|
2410 | onHiddenChange : function(cm, col, hidden){ |
---|
2411 | this.updateColumnHidden(col, hidden); |
---|
2412 | }, |
---|
2413 | |
---|
2414 | // private |
---|
2415 | onColumnMove : function(cm, oldIndex, newIndex){ |
---|
2416 | this.indexMap = null; |
---|
2417 | var s = this.getScrollState(); |
---|
2418 | this.refresh(true); |
---|
2419 | this.restoreScroll(s); |
---|
2420 | this.afterMove(newIndex); |
---|
2421 | this.grid.fireEvent('columnmove', oldIndex, newIndex); |
---|
2422 | }, |
---|
2423 | |
---|
2424 | // private |
---|
2425 | onColConfigChange : function(){ |
---|
2426 | delete this.lastViewWidth; |
---|
2427 | this.indexMap = null; |
---|
2428 | this.refresh(true); |
---|
2429 | }, |
---|
2430 | |
---|
2431 | /* -------------------- UI Events and Handlers ------------------------------ */ |
---|
2432 | // private |
---|
2433 | initUI : function(grid){ |
---|
2434 | grid.on("headerclick", this.onHeaderClick, this); |
---|
2435 | }, |
---|
2436 | |
---|
2437 | // private |
---|
2438 | initEvents : function(){ |
---|
2439 | }, |
---|
2440 | |
---|
2441 | // private |
---|
2442 | onHeaderClick : function(g, index){ |
---|
2443 | if(this.headersDisabled || !this.cm.isSortable(index)){ |
---|
2444 | return; |
---|
2445 | } |
---|
2446 | g.stopEditing(true); |
---|
2447 | g.store.sort(this.cm.getDataIndex(index)); |
---|
2448 | }, |
---|
2449 | |
---|
2450 | // private |
---|
2451 | onRowOver : function(e, t){ |
---|
2452 | var row; |
---|
2453 | if((row = this.findRowIndex(t)) !== false){ |
---|
2454 | this.addRowClass(row, "x-grid3-row-over"); |
---|
2455 | } |
---|
2456 | }, |
---|
2457 | |
---|
2458 | // private |
---|
2459 | onRowOut : function(e, t){ |
---|
2460 | var row; |
---|
2461 | if((row = this.findRowIndex(t)) !== false && !e.within(this.getRow(row), true)){ |
---|
2462 | this.removeRowClass(row, "x-grid3-row-over"); |
---|
2463 | } |
---|
2464 | }, |
---|
2465 | |
---|
2466 | // private |
---|
2467 | handleWheel : function(e){ |
---|
2468 | e.stopPropagation(); |
---|
2469 | }, |
---|
2470 | |
---|
2471 | // private |
---|
2472 | onRowSelect : function(row){ |
---|
2473 | this.addRowClass(row, this.selectedRowClass); |
---|
2474 | }, |
---|
2475 | |
---|
2476 | // private |
---|
2477 | onRowDeselect : function(row){ |
---|
2478 | this.removeRowClass(row, this.selectedRowClass); |
---|
2479 | }, |
---|
2480 | |
---|
2481 | // private |
---|
2482 | onCellSelect : function(row, col){ |
---|
2483 | var cell = this.getCell(row, col); |
---|
2484 | if(cell){ |
---|
2485 | this.fly(cell).addClass("x-grid3-cell-selected"); |
---|
2486 | } |
---|
2487 | }, |
---|
2488 | |
---|
2489 | // private |
---|
2490 | onCellDeselect : function(row, col){ |
---|
2491 | var cell = this.getCell(row, col); |
---|
2492 | if(cell){ |
---|
2493 | this.fly(cell).removeClass("x-grid3-cell-selected"); |
---|
2494 | } |
---|
2495 | }, |
---|
2496 | |
---|
2497 | // private |
---|
2498 | onColumnSplitterMoved : function(i, w){ |
---|
2499 | this.userResized = true; |
---|
2500 | var cm = this.grid.colModel; |
---|
2501 | cm.setColumnWidth(i, w, true); |
---|
2502 | |
---|
2503 | if(this.forceFit){ |
---|
2504 | this.fitColumns(true, false, i); |
---|
2505 | this.updateAllColumnWidths(); |
---|
2506 | }else{ |
---|
2507 | this.updateColumnWidth(i, w); |
---|
2508 | this.syncHeaderScroll(); |
---|
2509 | } |
---|
2510 | |
---|
2511 | this.grid.fireEvent("columnresize", i, w); |
---|
2512 | }, |
---|
2513 | |
---|
2514 | // private |
---|
2515 | handleHdMenuClick : function(item){ |
---|
2516 | var index = this.hdCtxIndex; |
---|
2517 | var cm = this.cm, ds = this.ds; |
---|
2518 | switch(item.itemId){ |
---|
2519 | case "asc": |
---|
2520 | ds.sort(cm.getDataIndex(index), "ASC"); |
---|
2521 | break; |
---|
2522 | case "desc": |
---|
2523 | ds.sort(cm.getDataIndex(index), "DESC"); |
---|
2524 | break; |
---|
2525 | default: |
---|
2526 | index = cm.getIndexById(item.itemId.substr(4)); |
---|
2527 | if(index != -1){ |
---|
2528 | if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){ |
---|
2529 | this.onDenyColumnHide(); |
---|
2530 | return false; |
---|
2531 | } |
---|
2532 | cm.setHidden(index, item.checked); |
---|
2533 | } |
---|
2534 | } |
---|
2535 | return true; |
---|
2536 | }, |
---|
2537 | |
---|
2538 | // private |
---|
2539 | isHideableColumn : function(c){ |
---|
2540 | return !c.hidden && !c.fixed; |
---|
2541 | }, |
---|
2542 | |
---|
2543 | // private |
---|
2544 | beforeColMenuShow : function(){ |
---|
2545 | var cm = this.cm, colCount = cm.getColumnCount(); |
---|
2546 | this.colMenu.removeAll(); |
---|
2547 | for(var i = 0; i < colCount; i++){ |
---|
2548 | if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){ |
---|
2549 | this.colMenu.add(new Ext.menu.CheckItem({ |
---|
2550 | itemId: "col-"+cm.getColumnId(i), |
---|
2551 | text: cm.getColumnHeader(i), |
---|
2552 | checked: !cm.isHidden(i), |
---|
2553 | hideOnClick:false, |
---|
2554 | disabled: cm.config[i].hideable === false |
---|
2555 | })); |
---|
2556 | } |
---|
2557 | } |
---|
2558 | }, |
---|
2559 | |
---|
2560 | // private |
---|
2561 | handleHdDown : function(e, t){ |
---|
2562 | if(Ext.fly(t).hasClass('x-grid3-hd-btn')){ |
---|
2563 | e.stopEvent(); |
---|
2564 | var hd = this.findHeaderCell(t); |
---|
2565 | Ext.fly(hd).addClass('x-grid3-hd-menu-open'); |
---|
2566 | var index = this.getCellIndex(hd); |
---|
2567 | this.hdCtxIndex = index; |
---|
2568 | var ms = this.hmenu.items, cm = this.cm; |
---|
2569 | ms.get("asc").setDisabled(!cm.isSortable(index)); |
---|
2570 | ms.get("desc").setDisabled(!cm.isSortable(index)); |
---|
2571 | this.hmenu.on("hide", function(){ |
---|
2572 | Ext.fly(hd).removeClass('x-grid3-hd-menu-open'); |
---|
2573 | }, this, {single:true}); |
---|
2574 | this.hmenu.show(t, "tl-bl?"); |
---|
2575 | } |
---|
2576 | }, |
---|
2577 | |
---|
2578 | // private |
---|
2579 | handleHdOver : function(e, t){ |
---|
2580 | var hd = this.findHeaderCell(t); |
---|
2581 | if(hd && !this.headersDisabled){ |
---|
2582 | this.activeHd = hd; |
---|
2583 | this.activeHdIndex = this.getCellIndex(hd); |
---|
2584 | var fly = this.fly(hd); |
---|
2585 | this.activeHdRegion = fly.getRegion(); |
---|
2586 | if(!this.cm.isMenuDisabled(this.activeHdIndex)){ |
---|
2587 | fly.addClass("x-grid3-hd-over"); |
---|
2588 | this.activeHdBtn = fly.child('.x-grid3-hd-btn'); |
---|
2589 | if(this.activeHdBtn){ |
---|
2590 | this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px'; |
---|
2591 | } |
---|
2592 | } |
---|
2593 | } |
---|
2594 | }, |
---|
2595 | |
---|
2596 | // private |
---|
2597 | handleHdMove : function(e, t){ |
---|
2598 | if(this.activeHd && !this.headersDisabled){ |
---|
2599 | var hw = this.splitHandleWidth || 5; |
---|
2600 | var r = this.activeHdRegion; |
---|
2601 | var x = e.getPageX(); |
---|
2602 | var ss = this.activeHd.style; |
---|
2603 | if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){ |
---|
2604 | ss.cursor = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize not always supported |
---|
2605 | }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){ |
---|
2606 | ss.cursor = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize'; |
---|
2607 | }else{ |
---|
2608 | ss.cursor = ''; |
---|
2609 | } |
---|
2610 | } |
---|
2611 | }, |
---|
2612 | |
---|
2613 | // private |
---|
2614 | handleHdOut : function(e, t){ |
---|
2615 | var hd = this.findHeaderCell(t); |
---|
2616 | if(hd && (!Ext.isIE || !e.within(hd, true))){ |
---|
2617 | this.activeHd = null; |
---|
2618 | this.fly(hd).removeClass("x-grid3-hd-over"); |
---|
2619 | hd.style.cursor = ''; |
---|
2620 | } |
---|
2621 | }, |
---|
2622 | |
---|
2623 | // private |
---|
2624 | hasRows : function(){ |
---|
2625 | var fc = this.mainBody.dom.firstChild; |
---|
2626 | return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty'; |
---|
2627 | }, |
---|
2628 | |
---|
2629 | // back compat |
---|
2630 | bind : function(d, c){ |
---|
2631 | this.initData(d, c); |
---|
2632 | } |
---|
2633 | }); |
---|
2634 | |
---|
2635 | |
---|
2636 | // private |
---|
2637 | // This is a support class used internally by the Grid components |
---|
2638 | Ext.grid.GridView.SplitDragZone = function(grid, hd){ |
---|
2639 | this.grid = grid; |
---|
2640 | this.view = grid.getView(); |
---|
2641 | this.marker = this.view.resizeMarker; |
---|
2642 | this.proxy = this.view.resizeProxy; |
---|
2643 | Ext.grid.GridView.SplitDragZone.superclass.constructor.call(this, hd, |
---|
2644 | "gridSplitters" + this.grid.getGridEl().id, { |
---|
2645 | dragElId : Ext.id(this.proxy.dom), resizeFrame:false |
---|
2646 | }); |
---|
2647 | this.scroll = false; |
---|
2648 | this.hw = this.view.splitHandleWidth || 5; |
---|
2649 | }; |
---|
2650 | Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, { |
---|
2651 | |
---|
2652 | b4StartDrag : function(x, y){ |
---|
2653 | this.view.headersDisabled = true; |
---|
2654 | var h = this.view.mainWrap.getHeight(); |
---|
2655 | this.marker.setHeight(h); |
---|
2656 | this.marker.show(); |
---|
2657 | this.marker.alignTo(this.view.getHeaderCell(this.cellIndex), 'tl-tl', [-2, 0]); |
---|
2658 | this.proxy.setHeight(h); |
---|
2659 | var w = this.cm.getColumnWidth(this.cellIndex); |
---|
2660 | var minw = Math.max(w-this.grid.minColumnWidth, 0); |
---|
2661 | this.resetConstraints(); |
---|
2662 | this.setXConstraint(minw, 1000); |
---|
2663 | this.setYConstraint(0, 0); |
---|
2664 | this.minX = x - minw; |
---|
2665 | this.maxX = x + 1000; |
---|
2666 | this.startPos = x; |
---|
2667 | Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y); |
---|
2668 | }, |
---|
2669 | |
---|
2670 | |
---|
2671 | handleMouseDown : function(e){ |
---|
2672 | var t = this.view.findHeaderCell(e.getTarget()); |
---|
2673 | if(t){ |
---|
2674 | var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1]; |
---|
2675 | var exy = e.getXY(), ex = exy[0]; |
---|
2676 | var w = t.offsetWidth, adjust = false; |
---|
2677 | if((ex - x) <= this.hw){ |
---|
2678 | adjust = -1; |
---|
2679 | }else if((x+w) - ex <= this.hw){ |
---|
2680 | adjust = 0; |
---|
2681 | } |
---|
2682 | if(adjust !== false){ |
---|
2683 | this.cm = this.grid.colModel; |
---|
2684 | var ci = this.view.getCellIndex(t); |
---|
2685 | if(adjust == -1){ |
---|
2686 | if (ci + adjust < 0) { |
---|
2687 | return; |
---|
2688 | } |
---|
2689 | while(this.cm.isHidden(ci+adjust)){ |
---|
2690 | --adjust; |
---|
2691 | if(ci+adjust < 0){ |
---|
2692 | return; |
---|
2693 | } |
---|
2694 | } |
---|
2695 | } |
---|
2696 | this.cellIndex = ci+adjust; |
---|
2697 | this.split = t.dom; |
---|
2698 | if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){ |
---|
2699 | Ext.grid.GridView.SplitDragZone.superclass.handleMouseDown.apply(this, arguments); |
---|
2700 | } |
---|
2701 | }else if(this.view.columnDrag){ |
---|
2702 | this.view.columnDrag.callHandleMouseDown(e); |
---|
2703 | } |
---|
2704 | } |
---|
2705 | }, |
---|
2706 | |
---|
2707 | endDrag : function(e){ |
---|
2708 | this.marker.hide(); |
---|
2709 | var v = this.view; |
---|
2710 | var endX = Math.max(this.minX, e.getPageX()); |
---|
2711 | var diff = endX - this.startPos; |
---|
2712 | v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff); |
---|
2713 | setTimeout(function(){ |
---|
2714 | v.headersDisabled = false; |
---|
2715 | }, 50); |
---|
2716 | }, |
---|
2717 | |
---|
2718 | autoOffset : function(){ |
---|
2719 | this.setDelta(0,0); |
---|
2720 | } |
---|
2721 | }); |
---|
2722 | // private |
---|
2723 | // This is a support class used internally by the Grid components |
---|
2724 | Ext.grid.HeaderDragZone = function(grid, hd, hd2){ |
---|
2725 | this.grid = grid; |
---|
2726 | this.view = grid.getView(); |
---|
2727 | this.ddGroup = "gridHeader" + this.grid.getGridEl().id; |
---|
2728 | Ext.grid.HeaderDragZone.superclass.constructor.call(this, hd); |
---|
2729 | if(hd2){ |
---|
2730 | this.setHandleElId(Ext.id(hd)); |
---|
2731 | this.setOuterHandleElId(Ext.id(hd2)); |
---|
2732 | } |
---|
2733 | this.scroll = false; |
---|
2734 | }; |
---|
2735 | Ext.extend(Ext.grid.HeaderDragZone, Ext.dd.DragZone, { |
---|
2736 | maxDragWidth: 120, |
---|
2737 | getDragData : function(e){ |
---|
2738 | var t = Ext.lib.Event.getTarget(e); |
---|
2739 | var h = this.view.findHeaderCell(t); |
---|
2740 | if(h){ |
---|
2741 | return {ddel: h.firstChild, header:h}; |
---|
2742 | } |
---|
2743 | return false; |
---|
2744 | }, |
---|
2745 | |
---|
2746 | onInitDrag : function(e){ |
---|
2747 | this.view.headersDisabled = true; |
---|
2748 | var clone = this.dragData.ddel.cloneNode(true); |
---|
2749 | clone.id = Ext.id(); |
---|
2750 | clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px"; |
---|
2751 | this.proxy.update(clone); |
---|
2752 | return true; |
---|
2753 | }, |
---|
2754 | |
---|
2755 | afterValidDrop : function(){ |
---|
2756 | var v = this.view; |
---|
2757 | setTimeout(function(){ |
---|
2758 | v.headersDisabled = false; |
---|
2759 | }, 50); |
---|
2760 | }, |
---|
2761 | |
---|
2762 | afterInvalidDrop : function(){ |
---|
2763 | var v = this.view; |
---|
2764 | setTimeout(function(){ |
---|
2765 | v.headersDisabled = false; |
---|
2766 | }, 50); |
---|
2767 | } |
---|
2768 | }); |
---|
2769 | |
---|
2770 | // private |
---|
2771 | // This is a support class used internally by the Grid components |
---|
2772 | Ext.grid.HeaderDropZone = function(grid, hd, hd2){ |
---|
2773 | this.grid = grid; |
---|
2774 | this.view = grid.getView(); |
---|
2775 | // split the proxies so they don't interfere with mouse events |
---|
2776 | this.proxyTop = Ext.DomHelper.append(document.body, { |
---|
2777 | cls:"col-move-top", html:" " |
---|
2778 | }, true); |
---|
2779 | this.proxyBottom = Ext.DomHelper.append(document.body, { |
---|
2780 | cls:"col-move-bottom", html:" " |
---|
2781 | }, true); |
---|
2782 | this.proxyTop.hide = this.proxyBottom.hide = function(){ |
---|
2783 | this.setLeftTop(-100,-100); |
---|
2784 | this.setStyle("visibility", "hidden"); |
---|
2785 | }; |
---|
2786 | this.ddGroup = "gridHeader" + this.grid.getGridEl().id; |
---|
2787 | // temporarily disabled |
---|
2788 | //Ext.dd.ScrollManager.register(this.view.scroller.dom); |
---|
2789 | Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom); |
---|
2790 | }; |
---|
2791 | Ext.extend(Ext.grid.HeaderDropZone, Ext.dd.DropZone, { |
---|
2792 | proxyOffsets : [-4, -9], |
---|
2793 | fly: Ext.Element.fly, |
---|
2794 | |
---|
2795 | getTargetFromEvent : function(e){ |
---|
2796 | var t = Ext.lib.Event.getTarget(e); |
---|
2797 | var cindex = this.view.findCellIndex(t); |
---|
2798 | if(cindex !== false){ |
---|
2799 | return this.view.getHeaderCell(cindex); |
---|
2800 | } |
---|
2801 | }, |
---|
2802 | |
---|
2803 | nextVisible : function(h){ |
---|
2804 | var v = this.view, cm = this.grid.colModel; |
---|
2805 | h = h.nextSibling; |
---|
2806 | while(h){ |
---|
2807 | if(!cm.isHidden(v.getCellIndex(h))){ |
---|
2808 | return h; |
---|
2809 | } |
---|
2810 | h = h.nextSibling; |
---|
2811 | } |
---|
2812 | return null; |
---|
2813 | }, |
---|
2814 | |
---|
2815 | prevVisible : function(h){ |
---|
2816 | var v = this.view, cm = this.grid.colModel; |
---|
2817 | h = h.prevSibling; |
---|
2818 | while(h){ |
---|
2819 | if(!cm.isHidden(v.getCellIndex(h))){ |
---|
2820 | return h; |
---|
2821 | } |
---|
2822 | h = h.prevSibling; |
---|
2823 | } |
---|
2824 | return null; |
---|
2825 | }, |
---|
2826 | |
---|
2827 | positionIndicator : function(h, n, e){ |
---|
2828 | var x = Ext.lib.Event.getPageX(e); |
---|
2829 | var r = Ext.lib.Dom.getRegion(n.firstChild); |
---|
2830 | var px, pt, py = r.top + this.proxyOffsets[1]; |
---|
2831 | if((r.right - x) <= (r.right-r.left)/2){ |
---|
2832 | px = r.right+this.view.borderWidth; |
---|
2833 | pt = "after"; |
---|
2834 | }else{ |
---|
2835 | px = r.left; |
---|
2836 | pt = "before"; |
---|
2837 | } |
---|
2838 | |
---|
2839 | if(this.grid.colModel.isFixed(this.view.getCellIndex(n))){ |
---|
2840 | return false; |
---|
2841 | } |
---|
2842 | |
---|
2843 | px += this.proxyOffsets[0]; |
---|
2844 | this.proxyTop.setLeftTop(px, py); |
---|
2845 | this.proxyTop.show(); |
---|
2846 | if(!this.bottomOffset){ |
---|
2847 | this.bottomOffset = this.view.mainHd.getHeight(); |
---|
2848 | } |
---|
2849 | this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset); |
---|
2850 | this.proxyBottom.show(); |
---|
2851 | return pt; |
---|
2852 | }, |
---|
2853 | |
---|
2854 | onNodeEnter : function(n, dd, e, data){ |
---|
2855 | if(data.header != n){ |
---|
2856 | this.positionIndicator(data.header, n, e); |
---|
2857 | } |
---|
2858 | }, |
---|
2859 | |
---|
2860 | onNodeOver : function(n, dd, e, data){ |
---|
2861 | var result = false; |
---|
2862 | if(data.header != n){ |
---|
2863 | result = this.positionIndicator(data.header, n, e); |
---|
2864 | } |
---|
2865 | if(!result){ |
---|
2866 | this.proxyTop.hide(); |
---|
2867 | this.proxyBottom.hide(); |
---|
2868 | } |
---|
2869 | return result ? this.dropAllowed : this.dropNotAllowed; |
---|
2870 | }, |
---|
2871 | |
---|
2872 | onNodeOut : function(n, dd, e, data){ |
---|
2873 | this.proxyTop.hide(); |
---|
2874 | this.proxyBottom.hide(); |
---|
2875 | }, |
---|
2876 | |
---|
2877 | onNodeDrop : function(n, dd, e, data){ |
---|
2878 | var h = data.header; |
---|
2879 | if(h != n){ |
---|
2880 | var cm = this.grid.colModel; |
---|
2881 | var x = Ext.lib.Event.getPageX(e); |
---|
2882 | var r = Ext.lib.Dom.getRegion(n.firstChild); |
---|
2883 | var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before"; |
---|
2884 | var oldIndex = this.view.getCellIndex(h); |
---|
2885 | var newIndex = this.view.getCellIndex(n); |
---|
2886 | if(pt == "after"){ |
---|
2887 | newIndex++; |
---|
2888 | } |
---|
2889 | if(oldIndex < newIndex){ |
---|
2890 | newIndex--; |
---|
2891 | } |
---|
2892 | cm.moveColumn(oldIndex, newIndex); |
---|
2893 | this.grid.fireEvent("columnmove", oldIndex, newIndex); |
---|
2894 | return true; |
---|
2895 | } |
---|
2896 | return false; |
---|
2897 | } |
---|
2898 | }); |
---|
2899 | |
---|
2900 | |
---|
2901 | Ext.grid.GridView.ColumnDragZone = function(grid, hd){ |
---|
2902 | Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null); |
---|
2903 | this.proxy.el.addClass('x-grid3-col-dd'); |
---|
2904 | }; |
---|
2905 | |
---|
2906 | Ext.extend(Ext.grid.GridView.ColumnDragZone, Ext.grid.HeaderDragZone, { |
---|
2907 | handleMouseDown : function(e){ |
---|
2908 | |
---|
2909 | }, |
---|
2910 | |
---|
2911 | callHandleMouseDown : function(e){ |
---|
2912 | Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e); |
---|
2913 | } |
---|
2914 | });// private |
---|
2915 | // This is a support class used internally by the Grid components |
---|
2916 | Ext.grid.SplitDragZone = function(grid, hd, hd2){ |
---|
2917 | this.grid = grid; |
---|
2918 | this.view = grid.getView(); |
---|
2919 | this.proxy = this.view.resizeProxy; |
---|
2920 | Ext.grid.SplitDragZone.superclass.constructor.call(this, hd, |
---|
2921 | "gridSplitters" + this.grid.getGridEl().id, { |
---|
2922 | dragElId : Ext.id(this.proxy.dom), resizeFrame:false |
---|
2923 | }); |
---|
2924 | this.setHandleElId(Ext.id(hd)); |
---|
2925 | this.setOuterHandleElId(Ext.id(hd2)); |
---|
2926 | this.scroll = false; |
---|
2927 | }; |
---|
2928 | Ext.extend(Ext.grid.SplitDragZone, Ext.dd.DDProxy, { |
---|
2929 | fly: Ext.Element.fly, |
---|
2930 | |
---|
2931 | b4StartDrag : function(x, y){ |
---|
2932 | this.view.headersDisabled = true; |
---|
2933 | this.proxy.setHeight(this.view.mainWrap.getHeight()); |
---|
2934 | var w = this.cm.getColumnWidth(this.cellIndex); |
---|
2935 | var minw = Math.max(w-this.grid.minColumnWidth, 0); |
---|
2936 | this.resetConstraints(); |
---|
2937 | this.setXConstraint(minw, 1000); |
---|
2938 | this.setYConstraint(0, 0); |
---|
2939 | this.minX = x - minw; |
---|
2940 | this.maxX = x + 1000; |
---|
2941 | this.startPos = x; |
---|
2942 | Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y); |
---|
2943 | }, |
---|
2944 | |
---|
2945 | |
---|
2946 | handleMouseDown : function(e){ |
---|
2947 | var ev = Ext.EventObject.setEvent(e); |
---|
2948 | var t = this.fly(ev.getTarget()); |
---|
2949 | if(t.hasClass("x-grid-split")){ |
---|
2950 | this.cellIndex = this.view.getCellIndex(t.dom); |
---|
2951 | this.split = t.dom; |
---|
2952 | this.cm = this.grid.colModel; |
---|
2953 | if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){ |
---|
2954 | Ext.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments); |
---|
2955 | } |
---|
2956 | } |
---|
2957 | }, |
---|
2958 | |
---|
2959 | endDrag : function(e){ |
---|
2960 | this.view.headersDisabled = false; |
---|
2961 | var endX = Math.max(this.minX, Ext.lib.Event.getPageX(e)); |
---|
2962 | var diff = endX - this.startPos; |
---|
2963 | this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff); |
---|
2964 | }, |
---|
2965 | |
---|
2966 | autoOffset : function(){ |
---|
2967 | this.setDelta(0,0); |
---|
2968 | } |
---|
2969 | });/** |
---|
2970 | * @class Ext.grid.GridDragZone |
---|
2971 | * @extends Ext.dd.DragZone |
---|
2972 | * <p>A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations of two of the |
---|
2973 | * template methods of DragZone to enable dragging of the selected rows of a GridPanel.</p> |
---|
2974 | * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's template method implementations of |
---|
2975 | * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, |
---|
2976 | * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop}</p> are able |
---|
2977 | * to process the {@link #getDragData data} which is provided. |
---|
2978 | */ |
---|
2979 | Ext.grid.GridDragZone = function(grid, config){ |
---|
2980 | this.view = grid.getView(); |
---|
2981 | Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config); |
---|
2982 | this.scroll = false; |
---|
2983 | this.grid = grid; |
---|
2984 | this.ddel = document.createElement('div'); |
---|
2985 | this.ddel.className = 'x-grid-dd-wrap'; |
---|
2986 | }; |
---|
2987 | |
---|
2988 | Ext.extend(Ext.grid.GridDragZone, Ext.dd.DragZone, { |
---|
2989 | ddGroup : "GridDD", |
---|
2990 | |
---|
2991 | /** |
---|
2992 | * <p>The provided implementation of the getDragData method which collects the data to be dragged from the GridPanel on mousedown.</p> |
---|
2993 | * <p>This data is available for processing in the {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, |
---|
2994 | * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} methods of a cooperating {@link Ext.dd.DropZone DropZone}.</p> |
---|
2995 | * <p>The data object contains the following properties:<ul> |
---|
2996 | * <li><b>grid</b> : Ext.Grid.GridPanel<div class="sub-desc">The GridPanel from which the data is being dragged.</div></li> |
---|
2997 | * <li><b>ddel</b> : htmlElement<div class="sub-desc">An htmlElement which provides the "picture" of the data being dragged.</div></li> |
---|
2998 | * <li><b>rowIndex</b> : Number<div class="sub-desc">The index of the row which receieved the mousedown gesture which triggered the drag.</div></li> |
---|
2999 | * <li><b>selections</b> : Array<div class="sub-desc">An Array of the selected Records which are being dragged from the GridPanel.</div></li> |
---|
3000 | * </ul></p> |
---|
3001 | */ |
---|
3002 | getDragData : function(e){ |
---|
3003 | var t = Ext.lib.Event.getTarget(e); |
---|
3004 | var rowIndex = this.view.findRowIndex(t); |
---|
3005 | if(rowIndex !== false){ |
---|
3006 | var sm = this.grid.selModel; |
---|
3007 | if(!sm.isSelected(rowIndex) || e.hasModifier()){ |
---|
3008 | sm.handleMouseDown(this.grid, rowIndex, e); |
---|
3009 | } |
---|
3010 | return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()}; |
---|
3011 | } |
---|
3012 | return false; |
---|
3013 | }, |
---|
3014 | |
---|
3015 | /** |
---|
3016 | * <p>The provided implementation of the onInitDrag method. Sets the <tt>innerHTML</tt> of the drag proxy which provides the "picture" |
---|
3017 | * of the data being dragged.</p> |
---|
3018 | * <p>The <tt>innerHTML</tt> data is found by calling the owning GridPanel's {@link Ext.grid.GridPanel#getDragDropText getDragDropText}.</p> |
---|
3019 | */ |
---|
3020 | onInitDrag : function(e){ |
---|
3021 | var data = this.dragData; |
---|
3022 | this.ddel.innerHTML = this.grid.getDragDropText(); |
---|
3023 | this.proxy.update(this.ddel); |
---|
3024 | // fire start drag? |
---|
3025 | }, |
---|
3026 | |
---|
3027 | /** |
---|
3028 | * An empty immplementation. Implement this to provide behaviour after a repair of an invalid drop. An implementation might highlight |
---|
3029 | * the selected rows to show that they have not been dragged. |
---|
3030 | */ |
---|
3031 | afterRepair : function(){ |
---|
3032 | this.dragging = false; |
---|
3033 | }, |
---|
3034 | |
---|
3035 | /** |
---|
3036 | * <p>An empty implementation. Implement this to provide coordinates for the drag proxy to slide back to after an invalid drop.</p> |
---|
3037 | * <p>Called before a repair of an invalid drop to get the XY to animate to.</p> |
---|
3038 | * @param {EventObject} e The mouse up event |
---|
3039 | * @return {Array} The xy location (e.g. [100, 200]) |
---|
3040 | */ |
---|
3041 | getRepairXY : function(e, data){ |
---|
3042 | return false; |
---|
3043 | }, |
---|
3044 | |
---|
3045 | onEndDrag : function(data, e){ |
---|
3046 | // fire end drag? |
---|
3047 | }, |
---|
3048 | |
---|
3049 | onValidDrop : function(dd, e, id){ |
---|
3050 | // fire drag drop? |
---|
3051 | this.hideProxy(); |
---|
3052 | }, |
---|
3053 | |
---|
3054 | beforeInvalidDrop : function(e, id){ |
---|
3055 | |
---|
3056 | } |
---|
3057 | }); |
---|
3058 | /** |
---|
3059 | * @class Ext.grid.ColumnModel |
---|
3060 | * @extends Ext.util.Observable |
---|
3061 | * <p>After the data has been read into the client side cache (<b>{@link Ext.data.Store Store}</b>), |
---|
3062 | * the ColumnModel is used to configure how and what parts of that data will be displayed in the |
---|
3063 | * vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation |
---|
3064 | * of a ColumnModel used by implentations of {@link Ext.grid.GridPanel GridPanel}.</p> |
---|
3065 | * <p>Data is mapped into the store's records and then indexed into the ColumnModel using the |
---|
3066 | * <tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt>:</p> |
---|
3067 | * <pre><code> |
---|
3068 | {data source} == mapping ==> {data store} == <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b> ==> {ColumnModel} |
---|
3069 | * </code></pre> |
---|
3070 | * <p>Each {@link Ext.grid.Column Column} in the grid's ColumnModel is configured with a |
---|
3071 | * <tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt> to specify how the data within |
---|
3072 | * each record in the store is indexed into the ColumnModel.</p> |
---|
3073 | * <p>There are two ways to initialize the ColumnModel class:</p> |
---|
3074 | * <p><u>Initialization Method 1: an Array</u></p> |
---|
3075 | <pre><code> |
---|
3076 | var colModel = new Ext.grid.ColumnModel([ |
---|
3077 | { header: "Ticker", width: 60, sortable: true}, |
---|
3078 | { header: "Company Name", width: 150, sortable: true, id: 'company'}, |
---|
3079 | { header: "Market Cap.", width: 100, sortable: true}, |
---|
3080 | { header: "$ Sales", width: 100, sortable: true, renderer: money}, |
---|
3081 | { header: "Employees", width: 100, sortable: true, resizable: false} |
---|
3082 | ]); |
---|
3083 | </code></pre> |
---|
3084 | * <p>The ColumnModel may be initialized with an Array of {@link Ext.grid.Column} column configuration |
---|
3085 | * objects to define the initial layout / display of the columns in the Grid. The order of each |
---|
3086 | * {@link Ext.grid.Column} column configuration object within the specified Array defines the initial |
---|
3087 | * order of the column display. A Column's display may be initially hidden using the |
---|
3088 | * <tt>{@link Ext.grid.Column#hidden hidden}</tt></b> config property (and then shown using the column |
---|
3089 | * header menu). Field's that are not included in the ColumnModel will not be displayable at all.</p> |
---|
3090 | * <p>How each column in the grid correlates (maps) to the {@link Ext.data.Record} field in the |
---|
3091 | * {@link Ext.data.Store Store} the column draws its data from is configured through the |
---|
3092 | * <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b>. If the |
---|
3093 | * <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b> is not explicitly defined (as shown in the |
---|
3094 | * example above) it will use the column configuration's index in the Array as the index.</p> |
---|
3095 | * <p>See <b><tt>{@link Ext.grid.Column}</tt></b> for additional configuration options for each column.</p> |
---|
3096 | * <p><u>Initialization Method 2: an Object</u></p> |
---|
3097 | * <p>In order to use configuration options from <tt>Ext.grid.ColumnModel</tt>, an Object may be used to |
---|
3098 | * initialize the ColumnModel. The column configuration Array will be specified in the <tt><b>{@link #columns}</b></tt> |
---|
3099 | * config property. The <tt><b>{@link #defaults}</b></tt> config property can be used to apply defaults |
---|
3100 | * for all columns, e.g.:</p><pre><code> |
---|
3101 | var colModel = new Ext.grid.ColumnModel({ |
---|
3102 | columns: [ |
---|
3103 | { header: "Ticker", width: 60, menuDisabled: false}, |
---|
3104 | { header: "Company Name", width: 150, id: 'company'}, |
---|
3105 | { header: "Market Cap."}, |
---|
3106 | { header: "$ Sales", renderer: money}, |
---|
3107 | { header: "Employees", resizable: false} |
---|
3108 | ], |
---|
3109 | defaults: { |
---|
3110 | sortable: true, |
---|
3111 | menuDisabled: true, |
---|
3112 | width: 100 |
---|
3113 | }, |
---|
3114 | listeners: { |
---|
3115 | {@link #hiddenchange}: function(cm, colIndex, hidden) { |
---|
3116 | saveConfig(colIndex, hidden); |
---|
3117 | } |
---|
3118 | } |
---|
3119 | }); |
---|
3120 | </code></pre> |
---|
3121 | * <p>In both examples above, the ability to apply a CSS class to all cells in a column (including the |
---|
3122 | * header) is demonstrated through the use of the <b><tt>{@link Ext.grid.Column#id id}</tt></b> config |
---|
3123 | * option. This column could be styled by including the following css:</p><pre><code> |
---|
3124 | //add this css *after* the core css is loaded |
---|
3125 | .x-grid3-td-company { |
---|
3126 | color: red; // entire column will have red font |
---|
3127 | } |
---|
3128 | // modify the header row only, adding an icon to the column header |
---|
3129 | .x-grid3-hd-company { |
---|
3130 | background: transparent |
---|
3131 | url(../../resources/images/icons/silk/building.png) |
---|
3132 | no-repeat 3px 3px ! important; |
---|
3133 | padding-left:20px; |
---|
3134 | } |
---|
3135 | </code></pre> |
---|
3136 | * Note that the "Company Name" column could be specified as the |
---|
3137 | * <b><tt>{@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></b>. |
---|
3138 | * @constructor |
---|
3139 | * @param {Mixed} config Specify either an Array of {@link Ext.grid.Column} configuration objects or specify |
---|
3140 | * a configuration Object (see introductory section discussion utilizing Initialization Method 2 above). |
---|
3141 | */ |
---|
3142 | Ext.grid.ColumnModel = function(config){ |
---|
3143 | /** |
---|
3144 | * An Array of {@link Ext.grid.Column Column definition} objects representing the configuration |
---|
3145 | * of this ColumnModel. See {@link Ext.grid.Column} for the configuration properties that may |
---|
3146 | * be specified. |
---|
3147 | * @property config |
---|
3148 | * @type Array |
---|
3149 | */ |
---|
3150 | if(config.columns){ |
---|
3151 | Ext.apply(this, config); |
---|
3152 | this.setConfig(config.columns, true); |
---|
3153 | }else{ |
---|
3154 | this.setConfig(config, true); |
---|
3155 | } |
---|
3156 | this.addEvents( |
---|
3157 | /** |
---|
3158 | * @event widthchange |
---|
3159 | * Fires when the width of a column is programmaticially changed using |
---|
3160 | * <code>{@link #setColumnWidth}</code>. |
---|
3161 | * Note internal resizing suppresses the event from firing. See also |
---|
3162 | * {@link Ext.grid.GridPanel}.<code>{@link #columnresize}</code>. |
---|
3163 | * @param {ColumnModel} this |
---|
3164 | * @param {Number} columnIndex The column index |
---|
3165 | * @param {Number} newWidth The new width |
---|
3166 | */ |
---|
3167 | "widthchange", |
---|
3168 | /** |
---|
3169 | * @event headerchange |
---|
3170 | * Fires when the text of a header changes. |
---|
3171 | * @param {ColumnModel} this |
---|
3172 | * @param {Number} columnIndex The column index |
---|
3173 | * @param {String} newText The new header text |
---|
3174 | */ |
---|
3175 | "headerchange", |
---|
3176 | /** |
---|
3177 | * @event hiddenchange |
---|
3178 | * Fires when a column is hidden or "unhidden". |
---|
3179 | * @param {ColumnModel} this |
---|
3180 | * @param {Number} columnIndex The column index |
---|
3181 | * @param {Boolean} hidden true if hidden, false otherwise |
---|
3182 | */ |
---|
3183 | "hiddenchange", |
---|
3184 | /** |
---|
3185 | * @event columnmoved |
---|
3186 | * Fires when a column is moved. |
---|
3187 | * @param {ColumnModel} this |
---|
3188 | * @param {Number} oldIndex |
---|
3189 | * @param {Number} newIndex |
---|
3190 | */ |
---|
3191 | "columnmoved", |
---|
3192 | /** |
---|
3193 | * @event configchange |
---|
3194 | * Fires when the configuration is changed |
---|
3195 | * @param {ColumnModel} this |
---|
3196 | */ |
---|
3197 | "configchange" |
---|
3198 | ); |
---|
3199 | Ext.grid.ColumnModel.superclass.constructor.call(this); |
---|
3200 | }; |
---|
3201 | Ext.extend(Ext.grid.ColumnModel, Ext.util.Observable, { |
---|
3202 | /** |
---|
3203 | * @cfg {Number} defaultWidth (optional) The width of columns which have no <tt>{@link #width}</tt> |
---|
3204 | * specified (defaults to <tt>100</tt>). This property shall preferably be configured through the |
---|
3205 | * <tt><b>{@link #defaults}</b></tt> config property. |
---|
3206 | */ |
---|
3207 | defaultWidth: 100, |
---|
3208 | /** |
---|
3209 | * @cfg {Boolean} defaultSortable (optional) Default sortable of columns which have no |
---|
3210 | * sortable specified (defaults to <tt>false</tt>). This property shall preferably be configured |
---|
3211 | * through the <tt><b>{@link #defaults}</b></tt> config property. |
---|
3212 | */ |
---|
3213 | defaultSortable: false, |
---|
3214 | /** |
---|
3215 | * @cfg {Array} columns An Array of object literals. The config options defined by |
---|
3216 | * <b>{@link Ext.grid.Column}</b> are the options which may appear in the object literal for each |
---|
3217 | * individual column definition. |
---|
3218 | */ |
---|
3219 | /** |
---|
3220 | * @cfg {Object} defaults Object literal which will be used to apply {@link Ext.grid.Column} |
---|
3221 | * configuration options to all <tt><b>{@link #columns}</b></tt>. Configuration options specified with |
---|
3222 | * individual {@link Ext.grid.Column column} configs will supersede these <tt><b>{@link #defaults}</b></tt>. |
---|
3223 | */ |
---|
3224 | |
---|
3225 | /** |
---|
3226 | * Returns the id of the column at the specified index. |
---|
3227 | * @param {Number} index The column index |
---|
3228 | * @return {String} the id |
---|
3229 | */ |
---|
3230 | getColumnId : function(index){ |
---|
3231 | return this.config[index].id; |
---|
3232 | }, |
---|
3233 | |
---|
3234 | getColumnAt : function(index){ |
---|
3235 | return this.config[index]; |
---|
3236 | }, |
---|
3237 | |
---|
3238 | /** |
---|
3239 | * <p>Reconfigures this column model according to the passed Array of column definition objects. |
---|
3240 | * For a description of the individual properties of a column definition object, see the |
---|
3241 | * <a href="#Ext.grid.ColumnModel-configs">Config Options</a>.</p> |
---|
3242 | * <p>Causes the {@link #configchange} event to be fired. A {@link Ext.grid.GridPanel GridPanel} |
---|
3243 | * using this ColumnModel will listen for this event and refresh its UI automatically.</p> |
---|
3244 | * @param {Array} config Array of Column definition objects. |
---|
3245 | * @param {Boolean} initial Specify <tt>true</tt> to bypass cleanup which deletes the <tt>totalWidth</tt> |
---|
3246 | * and destroys existing editors. |
---|
3247 | */ |
---|
3248 | setConfig : function(config, initial){ |
---|
3249 | var i, c, len; |
---|
3250 | if(!initial){ // cleanup |
---|
3251 | delete this.totalWidth; |
---|
3252 | for(i = 0, len = this.config.length; i < len; i++){ |
---|
3253 | c = this.config[i]; |
---|
3254 | if(c.editor){ |
---|
3255 | c.editor.destroy(); |
---|
3256 | } |
---|
3257 | } |
---|
3258 | } |
---|
3259 | |
---|
3260 | // backward compatibility |
---|
3261 | this.defaults = Ext.apply({ |
---|
3262 | width: this.defaultWidth, |
---|
3263 | sortable: this.defaultSortable |
---|
3264 | }, this.defaults); |
---|
3265 | |
---|
3266 | this.config = config; |
---|
3267 | this.lookup = {}; |
---|
3268 | // if no id, create one |
---|
3269 | for(i = 0, len = config.length; i < len; i++){ |
---|
3270 | c = Ext.applyIf(config[i], this.defaults); |
---|
3271 | if(!c.isColumn){ |
---|
3272 | var cls = Ext.grid.Column.types[c.xtype || 'gridcolumn']; |
---|
3273 | c = new cls(c); |
---|
3274 | config[i] = c; |
---|
3275 | } |
---|
3276 | this.lookup[c.id] = c; |
---|
3277 | } |
---|
3278 | if(!initial){ |
---|
3279 | this.fireEvent('configchange', this); |
---|
3280 | } |
---|
3281 | }, |
---|
3282 | |
---|
3283 | /** |
---|
3284 | * Returns the column for a specified id. |
---|
3285 | * @param {String} id The column id |
---|
3286 | * @return {Object} the column |
---|
3287 | */ |
---|
3288 | getColumnById : function(id){ |
---|
3289 | return this.lookup[id]; |
---|
3290 | }, |
---|
3291 | |
---|
3292 | /** |
---|
3293 | * Returns the index for a specified column id. |
---|
3294 | * @param {String} id The column id |
---|
3295 | * @return {Number} the index, or -1 if not found |
---|
3296 | */ |
---|
3297 | getIndexById : function(id){ |
---|
3298 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
3299 | if(this.config[i].id == id){ |
---|
3300 | return i; |
---|
3301 | } |
---|
3302 | } |
---|
3303 | return -1; |
---|
3304 | }, |
---|
3305 | |
---|
3306 | /** |
---|
3307 | * Moves a column from one position to another. |
---|
3308 | * @param {Number} oldIndex The index of the column to move. |
---|
3309 | * @param {Number} newIndex The position at which to reinsert the coolumn. |
---|
3310 | */ |
---|
3311 | moveColumn : function(oldIndex, newIndex){ |
---|
3312 | var c = this.config[oldIndex]; |
---|
3313 | this.config.splice(oldIndex, 1); |
---|
3314 | this.config.splice(newIndex, 0, c); |
---|
3315 | this.dataMap = null; |
---|
3316 | this.fireEvent("columnmoved", this, oldIndex, newIndex); |
---|
3317 | }, |
---|
3318 | |
---|
3319 | /** |
---|
3320 | * Returns the number of columns. |
---|
3321 | * @param {Boolean} visibleOnly Optional. Pass as true to only include visible columns. |
---|
3322 | * @return {Number} |
---|
3323 | */ |
---|
3324 | getColumnCount : function(visibleOnly){ |
---|
3325 | if(visibleOnly === true){ |
---|
3326 | var c = 0; |
---|
3327 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
3328 | if(!this.isHidden(i)){ |
---|
3329 | c++; |
---|
3330 | } |
---|
3331 | } |
---|
3332 | return c; |
---|
3333 | } |
---|
3334 | return this.config.length; |
---|
3335 | }, |
---|
3336 | |
---|
3337 | /** |
---|
3338 | * Returns the column configs that return true by the passed function that is called |
---|
3339 | * with (columnConfig, index) |
---|
3340 | <pre><code> |
---|
3341 | // returns an array of column config objects for all hidden columns |
---|
3342 | var columns = grid.getColumnModel().getColumnsBy(function(c){ |
---|
3343 | return c.hidden; |
---|
3344 | }); |
---|
3345 | </code></pre> |
---|
3346 | * @param {Function} fn |
---|
3347 | * @param {Object} scope (optional) |
---|
3348 | * @return {Array} result |
---|
3349 | */ |
---|
3350 | getColumnsBy : function(fn, scope){ |
---|
3351 | var r = []; |
---|
3352 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
3353 | var c = this.config[i]; |
---|
3354 | if(fn.call(scope||this, c, i) === true){ |
---|
3355 | r[r.length] = c; |
---|
3356 | } |
---|
3357 | } |
---|
3358 | return r; |
---|
3359 | }, |
---|
3360 | |
---|
3361 | /** |
---|
3362 | * Returns true if the specified column is sortable. |
---|
3363 | * @param {Number} col The column index |
---|
3364 | * @return {Boolean} |
---|
3365 | */ |
---|
3366 | isSortable : function(col){ |
---|
3367 | return this.config[col].sortable; |
---|
3368 | }, |
---|
3369 | |
---|
3370 | /** |
---|
3371 | * Returns true if the specified column menu is disabled. |
---|
3372 | * @param {Number} col The column index |
---|
3373 | * @return {Boolean} |
---|
3374 | */ |
---|
3375 | isMenuDisabled : function(col){ |
---|
3376 | return !!this.config[col].menuDisabled; |
---|
3377 | }, |
---|
3378 | |
---|
3379 | /** |
---|
3380 | * Returns the rendering (formatting) function defined for the column. |
---|
3381 | * @param {Number} col The column index. |
---|
3382 | * @return {Function} The function used to render the cell. See {@link #setRenderer}. |
---|
3383 | */ |
---|
3384 | getRenderer : function(col){ |
---|
3385 | if(!this.config[col].renderer){ |
---|
3386 | return Ext.grid.ColumnModel.defaultRenderer; |
---|
3387 | } |
---|
3388 | return this.config[col].renderer; |
---|
3389 | }, |
---|
3390 | |
---|
3391 | /** |
---|
3392 | * Sets the rendering (formatting) function for a column. See {@link Ext.util.Format} for some |
---|
3393 | * default formatting functions. |
---|
3394 | * @param {Number} col The column index |
---|
3395 | * @param {Function} fn The function to use to process the cell's raw data |
---|
3396 | * to return HTML markup for the grid view. The render function is called with |
---|
3397 | * the following parameters:<ul> |
---|
3398 | * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> |
---|
3399 | * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> |
---|
3400 | * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> |
---|
3401 | * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell |
---|
3402 | * (e.g. 'style="color:red;"').</p></li></ul></p></li> |
---|
3403 | * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> |
---|
3404 | * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> |
---|
3405 | * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> |
---|
3406 | * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li></ul> |
---|
3407 | */ |
---|
3408 | setRenderer : function(col, fn){ |
---|
3409 | this.config[col].renderer = fn; |
---|
3410 | }, |
---|
3411 | |
---|
3412 | /** |
---|
3413 | * Returns the width for the specified column. |
---|
3414 | * @param {Number} col The column index |
---|
3415 | * @return {Number} |
---|
3416 | */ |
---|
3417 | getColumnWidth : function(col){ |
---|
3418 | return this.config[col].width; |
---|
3419 | }, |
---|
3420 | |
---|
3421 | /** |
---|
3422 | * Sets the width for a column. |
---|
3423 | * @param {Number} col The column index |
---|
3424 | * @param {Number} width The new width |
---|
3425 | * @param {Boolean} suppressEvent True to suppress firing the <code>{@link #widthchange}</code> |
---|
3426 | * event. Defaults to false. |
---|
3427 | */ |
---|
3428 | setColumnWidth : function(col, width, suppressEvent){ |
---|
3429 | this.config[col].width = width; |
---|
3430 | this.totalWidth = null; |
---|
3431 | if(!suppressEvent){ |
---|
3432 | this.fireEvent("widthchange", this, col, width); |
---|
3433 | } |
---|
3434 | }, |
---|
3435 | |
---|
3436 | /** |
---|
3437 | * Returns the total width of all columns. |
---|
3438 | * @param {Boolean} includeHidden True to include hidden column widths |
---|
3439 | * @return {Number} |
---|
3440 | */ |
---|
3441 | getTotalWidth : function(includeHidden){ |
---|
3442 | if(!this.totalWidth){ |
---|
3443 | this.totalWidth = 0; |
---|
3444 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
3445 | if(includeHidden || !this.isHidden(i)){ |
---|
3446 | this.totalWidth += this.getColumnWidth(i); |
---|
3447 | } |
---|
3448 | } |
---|
3449 | } |
---|
3450 | return this.totalWidth; |
---|
3451 | }, |
---|
3452 | |
---|
3453 | /** |
---|
3454 | * Returns the header for the specified column. |
---|
3455 | * @param {Number} col The column index |
---|
3456 | * @return {String} |
---|
3457 | */ |
---|
3458 | getColumnHeader : function(col){ |
---|
3459 | return this.config[col].header; |
---|
3460 | }, |
---|
3461 | |
---|
3462 | /** |
---|
3463 | * Sets the header for a column. |
---|
3464 | * @param {Number} col The column index |
---|
3465 | * @param {String} header The new header |
---|
3466 | */ |
---|
3467 | setColumnHeader : function(col, header){ |
---|
3468 | this.config[col].header = header; |
---|
3469 | this.fireEvent("headerchange", this, col, header); |
---|
3470 | }, |
---|
3471 | |
---|
3472 | /** |
---|
3473 | * Returns the tooltip for the specified column. |
---|
3474 | * @param {Number} col The column index |
---|
3475 | * @return {String} |
---|
3476 | */ |
---|
3477 | getColumnTooltip : function(col){ |
---|
3478 | return this.config[col].tooltip; |
---|
3479 | }, |
---|
3480 | /** |
---|
3481 | * Sets the tooltip for a column. |
---|
3482 | * @param {Number} col The column index |
---|
3483 | * @param {String} tooltip The new tooltip |
---|
3484 | */ |
---|
3485 | setColumnTooltip : function(col, tooltip){ |
---|
3486 | this.config[col].tooltip = tooltip; |
---|
3487 | }, |
---|
3488 | |
---|
3489 | /** |
---|
3490 | * Returns the dataIndex for the specified column. |
---|
3491 | <pre><code> |
---|
3492 | // Get field name for the column |
---|
3493 | var fieldName = grid.getColumnModel().getDataIndex(columnIndex); |
---|
3494 | </code></pre> |
---|
3495 | * @param {Number} col The column index |
---|
3496 | * @return {String} The column's dataIndex |
---|
3497 | */ |
---|
3498 | getDataIndex : function(col){ |
---|
3499 | return this.config[col].dataIndex; |
---|
3500 | }, |
---|
3501 | |
---|
3502 | /** |
---|
3503 | * Sets the dataIndex for a column. |
---|
3504 | * @param {Number} col The column index |
---|
3505 | * @param {String} dataIndex The new dataIndex |
---|
3506 | */ |
---|
3507 | setDataIndex : function(col, dataIndex){ |
---|
3508 | this.config[col].dataIndex = dataIndex; |
---|
3509 | }, |
---|
3510 | |
---|
3511 | /** |
---|
3512 | * Finds the index of the first matching column for the given dataIndex. |
---|
3513 | * @param {String} col The dataIndex to find |
---|
3514 | * @return {Number} The column index, or -1 if no match was found |
---|
3515 | */ |
---|
3516 | findColumnIndex : function(dataIndex){ |
---|
3517 | var c = this.config; |
---|
3518 | for(var i = 0, len = c.length; i < len; i++){ |
---|
3519 | if(c[i].dataIndex == dataIndex){ |
---|
3520 | return i; |
---|
3521 | } |
---|
3522 | } |
---|
3523 | return -1; |
---|
3524 | }, |
---|
3525 | |
---|
3526 | /** |
---|
3527 | * Returns true if the cell is editable. |
---|
3528 | <pre><code> |
---|
3529 | var store = new Ext.data.Store({...}); |
---|
3530 | var colModel = new Ext.grid.ColumnModel({ |
---|
3531 | columns: [...], |
---|
3532 | isCellEditable: function(col, row) { |
---|
3533 | var record = store.getAt(row); |
---|
3534 | if (record.get('readonly')) { // replace with your condition |
---|
3535 | return false; |
---|
3536 | } |
---|
3537 | return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row); |
---|
3538 | } |
---|
3539 | }); |
---|
3540 | var grid = new Ext.grid.GridPanel({ |
---|
3541 | store: store, |
---|
3542 | colModel: colModel, |
---|
3543 | ... |
---|
3544 | }); |
---|
3545 | </code></pre> |
---|
3546 | * @param {Number} colIndex The column index |
---|
3547 | * @param {Number} rowIndex The row index |
---|
3548 | * @return {Boolean} |
---|
3549 | */ |
---|
3550 | isCellEditable : function(colIndex, rowIndex){ |
---|
3551 | return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false; |
---|
3552 | }, |
---|
3553 | |
---|
3554 | /** |
---|
3555 | * Returns the editor defined for the cell/column. |
---|
3556 | * @param {Number} colIndex The column index |
---|
3557 | * @param {Number} rowIndex The row index |
---|
3558 | * @return {Ext.Editor} The {@link Ext.Editor Editor} that was created to wrap |
---|
3559 | * the {@link Ext.form.Field Field} used to edit the cell. |
---|
3560 | */ |
---|
3561 | getCellEditor : function(colIndex, rowIndex){ |
---|
3562 | return this.config[colIndex].getCellEditor(rowIndex); |
---|
3563 | }, |
---|
3564 | |
---|
3565 | /** |
---|
3566 | * Sets if a column is editable. |
---|
3567 | * @param {Number} col The column index |
---|
3568 | * @param {Boolean} editable True if the column is editable |
---|
3569 | */ |
---|
3570 | setEditable : function(col, editable){ |
---|
3571 | this.config[col].editable = editable; |
---|
3572 | }, |
---|
3573 | |
---|
3574 | |
---|
3575 | /** |
---|
3576 | * Returns true if the column is hidden. |
---|
3577 | * @param {Number} colIndex The column index |
---|
3578 | * @return {Boolean} |
---|
3579 | */ |
---|
3580 | isHidden : function(colIndex){ |
---|
3581 | return this.config[colIndex].hidden; |
---|
3582 | }, |
---|
3583 | |
---|
3584 | |
---|
3585 | /** |
---|
3586 | * Returns true if the column width cannot be changed |
---|
3587 | */ |
---|
3588 | isFixed : function(colIndex){ |
---|
3589 | return this.config[colIndex].fixed; |
---|
3590 | }, |
---|
3591 | |
---|
3592 | /** |
---|
3593 | * Returns true if the column can be resized |
---|
3594 | * @return {Boolean} |
---|
3595 | */ |
---|
3596 | isResizable : function(colIndex){ |
---|
3597 | return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true; |
---|
3598 | }, |
---|
3599 | /** |
---|
3600 | * Sets if a column is hidden. |
---|
3601 | <pre><code> |
---|
3602 | myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column). |
---|
3603 | </code></pre> |
---|
3604 | * @param {Number} colIndex The column index |
---|
3605 | * @param {Boolean} hidden True if the column is hidden |
---|
3606 | */ |
---|
3607 | setHidden : function(colIndex, hidden){ |
---|
3608 | var c = this.config[colIndex]; |
---|
3609 | if(c.hidden !== hidden){ |
---|
3610 | c.hidden = hidden; |
---|
3611 | this.totalWidth = null; |
---|
3612 | this.fireEvent("hiddenchange", this, colIndex, hidden); |
---|
3613 | } |
---|
3614 | }, |
---|
3615 | |
---|
3616 | /** |
---|
3617 | * Sets the editor for a column and destroys the prior editor. |
---|
3618 | * @param {Number} col The column index |
---|
3619 | * @param {Object} editor The editor object |
---|
3620 | */ |
---|
3621 | setEditor : function(col, editor){ |
---|
3622 | Ext.destroy(this.config[col].editor); |
---|
3623 | this.config[col].editor = editor; |
---|
3624 | }, |
---|
3625 | |
---|
3626 | /** |
---|
3627 | * Destroys this column model by purging any event listeners, and removing any editors. |
---|
3628 | */ |
---|
3629 | destroy : function(){ |
---|
3630 | for(var i = 0, c = this.config, len = c.length; i < len; i++){ |
---|
3631 | Ext.destroy(c[i].editor); |
---|
3632 | } |
---|
3633 | this.purgeListeners(); |
---|
3634 | } |
---|
3635 | }); |
---|
3636 | |
---|
3637 | // private |
---|
3638 | Ext.grid.ColumnModel.defaultRenderer = function(value){ |
---|
3639 | if(typeof value == "string" && value.length < 1){ |
---|
3640 | return " "; |
---|
3641 | } |
---|
3642 | return value; |
---|
3643 | };/** |
---|
3644 | * @class Ext.grid.AbstractSelectionModel |
---|
3645 | * @extends Ext.util.Observable |
---|
3646 | * Abstract base class for grid SelectionModels. It provides the interface that should be |
---|
3647 | * implemented by descendant classes. This class should not be directly instantiated. |
---|
3648 | * @constructor |
---|
3649 | */ |
---|
3650 | Ext.grid.AbstractSelectionModel = function(){ |
---|
3651 | this.locked = false; |
---|
3652 | Ext.grid.AbstractSelectionModel.superclass.constructor.call(this); |
---|
3653 | }; |
---|
3654 | |
---|
3655 | Ext.extend(Ext.grid.AbstractSelectionModel, Ext.util.Observable, { |
---|
3656 | /** |
---|
3657 | * The GridPanel for which this SelectionModel is handling selection. Read-only. |
---|
3658 | * @type Object |
---|
3659 | * @property grid |
---|
3660 | */ |
---|
3661 | |
---|
3662 | /** @ignore Called by the grid automatically. Do not call directly. */ |
---|
3663 | init : function(grid){ |
---|
3664 | this.grid = grid; |
---|
3665 | this.initEvents(); |
---|
3666 | }, |
---|
3667 | |
---|
3668 | /** |
---|
3669 | * Locks the selections. |
---|
3670 | */ |
---|
3671 | lock : function(){ |
---|
3672 | this.locked = true; |
---|
3673 | }, |
---|
3674 | |
---|
3675 | /** |
---|
3676 | * Unlocks the selections. |
---|
3677 | */ |
---|
3678 | unlock : function(){ |
---|
3679 | this.locked = false; |
---|
3680 | }, |
---|
3681 | |
---|
3682 | /** |
---|
3683 | * Returns true if the selections are locked. |
---|
3684 | * @return {Boolean} |
---|
3685 | */ |
---|
3686 | isLocked : function(){ |
---|
3687 | return this.locked; |
---|
3688 | }, |
---|
3689 | |
---|
3690 | destroy: function(){ |
---|
3691 | this.purgeListeners(); |
---|
3692 | } |
---|
3693 | });/** |
---|
3694 | * @class Ext.grid.RowSelectionModel |
---|
3695 | * @extends Ext.grid.AbstractSelectionModel |
---|
3696 | * The default SelectionModel used by {@link Ext.grid.GridPanel}. |
---|
3697 | * It supports multiple selections and keyboard selection/navigation. The objects stored |
---|
3698 | * as selections and returned by {@link #getSelected}, and {@link #getSelections} are |
---|
3699 | * the {@link Ext.data.Record Record}s which provide the data for the selected rows. |
---|
3700 | * @constructor |
---|
3701 | * @param {Object} config |
---|
3702 | */ |
---|
3703 | Ext.grid.RowSelectionModel = function(config){ |
---|
3704 | Ext.apply(this, config); |
---|
3705 | this.selections = new Ext.util.MixedCollection(false, function(o){ |
---|
3706 | return o.id; |
---|
3707 | }); |
---|
3708 | |
---|
3709 | this.last = false; |
---|
3710 | this.lastActive = false; |
---|
3711 | |
---|
3712 | this.addEvents( |
---|
3713 | /** |
---|
3714 | * @event selectionchange |
---|
3715 | * Fires when the selection changes |
---|
3716 | * @param {SelectionModel} this |
---|
3717 | */ |
---|
3718 | "selectionchange", |
---|
3719 | /** |
---|
3720 | * @event beforerowselect |
---|
3721 | * Fires before a row is selected, return false to cancel the selection. |
---|
3722 | * @param {SelectionModel} this |
---|
3723 | * @param {Number} rowIndex The index to be selected |
---|
3724 | * @param {Boolean} keepExisting False if other selections will be cleared |
---|
3725 | * @param {Record} record The record to be selected |
---|
3726 | */ |
---|
3727 | "beforerowselect", |
---|
3728 | /** |
---|
3729 | * @event rowselect |
---|
3730 | * Fires when a row is selected. |
---|
3731 | * @param {SelectionModel} this |
---|
3732 | * @param {Number} rowIndex The selected index |
---|
3733 | * @param {Ext.data.Record} r The selected record |
---|
3734 | */ |
---|
3735 | "rowselect", |
---|
3736 | /** |
---|
3737 | * @event rowdeselect |
---|
3738 | * Fires when a row is deselected. To prevent deselection |
---|
3739 | * {@link Ext.grid.AbstractSelectionModel#lock lock the selections}. |
---|
3740 | * @param {SelectionModel} this |
---|
3741 | * @param {Number} rowIndex |
---|
3742 | * @param {Record} record |
---|
3743 | */ |
---|
3744 | "rowdeselect" |
---|
3745 | ); |
---|
3746 | |
---|
3747 | Ext.grid.RowSelectionModel.superclass.constructor.call(this); |
---|
3748 | }; |
---|
3749 | |
---|
3750 | Ext.extend(Ext.grid.RowSelectionModel, Ext.grid.AbstractSelectionModel, { |
---|
3751 | /** |
---|
3752 | * @cfg {Boolean} singleSelect |
---|
3753 | * <tt>true</tt> to allow selection of only one row at a time (defaults to <tt>false</tt> |
---|
3754 | * allowing multiple selections) |
---|
3755 | */ |
---|
3756 | singleSelect : false, |
---|
3757 | |
---|
3758 | /** |
---|
3759 | * @cfg {Boolean} moveEditorOnEnter |
---|
3760 | * <tt>false</tt> to turn off moving the editor to the next row down when the enter key is pressed |
---|
3761 | * or the next row up when shift + enter keys are pressed. |
---|
3762 | */ |
---|
3763 | // private |
---|
3764 | initEvents : function(){ |
---|
3765 | |
---|
3766 | if(!this.grid.enableDragDrop && !this.grid.enableDrag){ |
---|
3767 | this.grid.on("rowmousedown", this.handleMouseDown, this); |
---|
3768 | }else{ // allow click to work like normal |
---|
3769 | this.grid.on("rowclick", function(grid, rowIndex, e) { |
---|
3770 | if(e.button === 0 && !e.shiftKey && !e.ctrlKey) { |
---|
3771 | this.selectRow(rowIndex, false); |
---|
3772 | grid.view.focusRow(rowIndex); |
---|
3773 | } |
---|
3774 | }, this); |
---|
3775 | } |
---|
3776 | |
---|
3777 | this.rowNav = new Ext.KeyNav(this.grid.getGridEl(), { |
---|
3778 | "up" : function(e){ |
---|
3779 | if(!e.shiftKey || this.singleSelect){ |
---|
3780 | this.selectPrevious(false); |
---|
3781 | }else if(this.last !== false && this.lastActive !== false){ |
---|
3782 | var last = this.last; |
---|
3783 | this.selectRange(this.last, this.lastActive-1); |
---|
3784 | this.grid.getView().focusRow(this.lastActive); |
---|
3785 | if(last !== false){ |
---|
3786 | this.last = last; |
---|
3787 | } |
---|
3788 | }else{ |
---|
3789 | this.selectFirstRow(); |
---|
3790 | } |
---|
3791 | }, |
---|
3792 | "down" : function(e){ |
---|
3793 | if(!e.shiftKey || this.singleSelect){ |
---|
3794 | this.selectNext(false); |
---|
3795 | }else if(this.last !== false && this.lastActive !== false){ |
---|
3796 | var last = this.last; |
---|
3797 | this.selectRange(this.last, this.lastActive+1); |
---|
3798 | this.grid.getView().focusRow(this.lastActive); |
---|
3799 | if(last !== false){ |
---|
3800 | this.last = last; |
---|
3801 | } |
---|
3802 | }else{ |
---|
3803 | this.selectFirstRow(); |
---|
3804 | } |
---|
3805 | }, |
---|
3806 | scope: this |
---|
3807 | }); |
---|
3808 | |
---|
3809 | var view = this.grid.view; |
---|
3810 | view.on("refresh", this.onRefresh, this); |
---|
3811 | view.on("rowupdated", this.onRowUpdated, this); |
---|
3812 | view.on("rowremoved", this.onRemove, this); |
---|
3813 | }, |
---|
3814 | |
---|
3815 | // private |
---|
3816 | onRefresh : function(){ |
---|
3817 | var ds = this.grid.store, index; |
---|
3818 | var s = this.getSelections(); |
---|
3819 | this.clearSelections(true); |
---|
3820 | for(var i = 0, len = s.length; i < len; i++){ |
---|
3821 | var r = s[i]; |
---|
3822 | if((index = ds.indexOfId(r.id)) != -1){ |
---|
3823 | this.selectRow(index, true); |
---|
3824 | } |
---|
3825 | } |
---|
3826 | if(s.length != this.selections.getCount()){ |
---|
3827 | this.fireEvent("selectionchange", this); |
---|
3828 | } |
---|
3829 | }, |
---|
3830 | |
---|
3831 | // private |
---|
3832 | onRemove : function(v, index, r){ |
---|
3833 | if(this.selections.remove(r) !== false){ |
---|
3834 | this.fireEvent('selectionchange', this); |
---|
3835 | } |
---|
3836 | }, |
---|
3837 | |
---|
3838 | // private |
---|
3839 | onRowUpdated : function(v, index, r){ |
---|
3840 | if(this.isSelected(r)){ |
---|
3841 | v.onRowSelect(index); |
---|
3842 | } |
---|
3843 | }, |
---|
3844 | |
---|
3845 | /** |
---|
3846 | * Select records. |
---|
3847 | * @param {Array} records The records to select |
---|
3848 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
3849 | */ |
---|
3850 | selectRecords : function(records, keepExisting){ |
---|
3851 | if(!keepExisting){ |
---|
3852 | this.clearSelections(); |
---|
3853 | } |
---|
3854 | var ds = this.grid.store; |
---|
3855 | for(var i = 0, len = records.length; i < len; i++){ |
---|
3856 | this.selectRow(ds.indexOf(records[i]), true); |
---|
3857 | } |
---|
3858 | }, |
---|
3859 | |
---|
3860 | /** |
---|
3861 | * Gets the number of selected rows. |
---|
3862 | * @return {Number} |
---|
3863 | */ |
---|
3864 | getCount : function(){ |
---|
3865 | return this.selections.length; |
---|
3866 | }, |
---|
3867 | |
---|
3868 | /** |
---|
3869 | * Selects the first row in the grid. |
---|
3870 | */ |
---|
3871 | selectFirstRow : function(){ |
---|
3872 | this.selectRow(0); |
---|
3873 | }, |
---|
3874 | |
---|
3875 | /** |
---|
3876 | * Select the last row. |
---|
3877 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
3878 | */ |
---|
3879 | selectLastRow : function(keepExisting){ |
---|
3880 | this.selectRow(this.grid.store.getCount() - 1, keepExisting); |
---|
3881 | }, |
---|
3882 | |
---|
3883 | /** |
---|
3884 | * Selects the row immediately following the last selected row. |
---|
3885 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
3886 | * @return {Boolean} <tt>true</tt> if there is a next row, else <tt>false</tt> |
---|
3887 | */ |
---|
3888 | selectNext : function(keepExisting){ |
---|
3889 | if(this.hasNext()){ |
---|
3890 | this.selectRow(this.last+1, keepExisting); |
---|
3891 | this.grid.getView().focusRow(this.last); |
---|
3892 | return true; |
---|
3893 | } |
---|
3894 | return false; |
---|
3895 | }, |
---|
3896 | |
---|
3897 | /** |
---|
3898 | * Selects the row that precedes the last selected row. |
---|
3899 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
3900 | * @return {Boolean} <tt>true</tt> if there is a previous row, else <tt>false</tt> |
---|
3901 | */ |
---|
3902 | selectPrevious : function(keepExisting){ |
---|
3903 | if(this.hasPrevious()){ |
---|
3904 | this.selectRow(this.last-1, keepExisting); |
---|
3905 | this.grid.getView().focusRow(this.last); |
---|
3906 | return true; |
---|
3907 | } |
---|
3908 | return false; |
---|
3909 | }, |
---|
3910 | |
---|
3911 | /** |
---|
3912 | * Returns true if there is a next record to select |
---|
3913 | * @return {Boolean} |
---|
3914 | */ |
---|
3915 | hasNext : function(){ |
---|
3916 | return this.last !== false && (this.last+1) < this.grid.store.getCount(); |
---|
3917 | }, |
---|
3918 | |
---|
3919 | /** |
---|
3920 | * Returns true if there is a previous record to select |
---|
3921 | * @return {Boolean} |
---|
3922 | */ |
---|
3923 | hasPrevious : function(){ |
---|
3924 | return !!this.last; |
---|
3925 | }, |
---|
3926 | |
---|
3927 | |
---|
3928 | /** |
---|
3929 | * Returns the selected records |
---|
3930 | * @return {Array} Array of selected records |
---|
3931 | */ |
---|
3932 | getSelections : function(){ |
---|
3933 | return [].concat(this.selections.items); |
---|
3934 | }, |
---|
3935 | |
---|
3936 | /** |
---|
3937 | * Returns the first selected record. |
---|
3938 | * @return {Record} |
---|
3939 | */ |
---|
3940 | getSelected : function(){ |
---|
3941 | return this.selections.itemAt(0); |
---|
3942 | }, |
---|
3943 | |
---|
3944 | /** |
---|
3945 | * Calls the passed function with each selection. If the function returns |
---|
3946 | * <tt>false</tt>, iteration is stopped and this function returns |
---|
3947 | * <tt>false</tt>. Otherwise it returns <tt>true</tt>. |
---|
3948 | * @param {Function} fn |
---|
3949 | * @param {Object} scope (optional) |
---|
3950 | * @return {Boolean} true if all selections were iterated |
---|
3951 | */ |
---|
3952 | each : function(fn, scope){ |
---|
3953 | var s = this.getSelections(); |
---|
3954 | for(var i = 0, len = s.length; i < len; i++){ |
---|
3955 | if(fn.call(scope || this, s[i], i) === false){ |
---|
3956 | return false; |
---|
3957 | } |
---|
3958 | } |
---|
3959 | return true; |
---|
3960 | }, |
---|
3961 | |
---|
3962 | /** |
---|
3963 | * Clears all selections if the selection model |
---|
3964 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
3965 | * @param {Boolean} fast (optional) <tt>true</tt> to bypass the |
---|
3966 | * conditional checks and events described in {@link #deselectRow}. |
---|
3967 | */ |
---|
3968 | clearSelections : function(fast){ |
---|
3969 | if(this.isLocked()){ |
---|
3970 | return; |
---|
3971 | } |
---|
3972 | if(fast !== true){ |
---|
3973 | var ds = this.grid.store; |
---|
3974 | var s = this.selections; |
---|
3975 | s.each(function(r){ |
---|
3976 | this.deselectRow(ds.indexOfId(r.id)); |
---|
3977 | }, this); |
---|
3978 | s.clear(); |
---|
3979 | }else{ |
---|
3980 | this.selections.clear(); |
---|
3981 | } |
---|
3982 | this.last = false; |
---|
3983 | }, |
---|
3984 | |
---|
3985 | |
---|
3986 | /** |
---|
3987 | * Selects all rows if the selection model |
---|
3988 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
3989 | */ |
---|
3990 | selectAll : function(){ |
---|
3991 | if(this.isLocked()){ |
---|
3992 | return; |
---|
3993 | } |
---|
3994 | this.selections.clear(); |
---|
3995 | for(var i = 0, len = this.grid.store.getCount(); i < len; i++){ |
---|
3996 | this.selectRow(i, true); |
---|
3997 | } |
---|
3998 | }, |
---|
3999 | |
---|
4000 | /** |
---|
4001 | * Returns <tt>true</tt> if there is a selection. |
---|
4002 | * @return {Boolean} |
---|
4003 | */ |
---|
4004 | hasSelection : function(){ |
---|
4005 | return this.selections.length > 0; |
---|
4006 | }, |
---|
4007 | |
---|
4008 | /** |
---|
4009 | * Returns <tt>true</tt> if the specified row is selected. |
---|
4010 | * @param {Number/Record} index The record or index of the record to check |
---|
4011 | * @return {Boolean} |
---|
4012 | */ |
---|
4013 | isSelected : function(index){ |
---|
4014 | var r = typeof index == "number" ? this.grid.store.getAt(index) : index; |
---|
4015 | return (r && this.selections.key(r.id) ? true : false); |
---|
4016 | }, |
---|
4017 | |
---|
4018 | /** |
---|
4019 | * Returns <tt>true</tt> if the specified record id is selected. |
---|
4020 | * @param {String} id The id of record to check |
---|
4021 | * @return {Boolean} |
---|
4022 | */ |
---|
4023 | isIdSelected : function(id){ |
---|
4024 | return (this.selections.key(id) ? true : false); |
---|
4025 | }, |
---|
4026 | |
---|
4027 | // private |
---|
4028 | handleMouseDown : function(g, rowIndex, e){ |
---|
4029 | if(e.button !== 0 || this.isLocked()){ |
---|
4030 | return; |
---|
4031 | } |
---|
4032 | var view = this.grid.getView(); |
---|
4033 | if(e.shiftKey && !this.singleSelect && this.last !== false){ |
---|
4034 | var last = this.last; |
---|
4035 | this.selectRange(last, rowIndex, e.ctrlKey); |
---|
4036 | this.last = last; // reset the last |
---|
4037 | view.focusRow(rowIndex); |
---|
4038 | }else{ |
---|
4039 | var isSelected = this.isSelected(rowIndex); |
---|
4040 | if(e.ctrlKey && isSelected){ |
---|
4041 | this.deselectRow(rowIndex); |
---|
4042 | }else if(!isSelected || this.getCount() > 1){ |
---|
4043 | this.selectRow(rowIndex, e.ctrlKey || e.shiftKey); |
---|
4044 | view.focusRow(rowIndex); |
---|
4045 | } |
---|
4046 | } |
---|
4047 | }, |
---|
4048 | |
---|
4049 | /** |
---|
4050 | * Selects multiple rows. |
---|
4051 | * @param {Array} rows Array of the indexes of the row to select |
---|
4052 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep |
---|
4053 | * existing selections (defaults to <tt>false</tt>) |
---|
4054 | */ |
---|
4055 | selectRows : function(rows, keepExisting){ |
---|
4056 | if(!keepExisting){ |
---|
4057 | this.clearSelections(); |
---|
4058 | } |
---|
4059 | for(var i = 0, len = rows.length; i < len; i++){ |
---|
4060 | this.selectRow(rows[i], true); |
---|
4061 | } |
---|
4062 | }, |
---|
4063 | |
---|
4064 | /** |
---|
4065 | * Selects a range of rows if the selection model |
---|
4066 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
4067 | * All rows in between startRow and endRow are also selected. |
---|
4068 | * @param {Number} startRow The index of the first row in the range |
---|
4069 | * @param {Number} endRow The index of the last row in the range |
---|
4070 | * @param {Boolean} keepExisting (optional) True to retain existing selections |
---|
4071 | */ |
---|
4072 | selectRange : function(startRow, endRow, keepExisting){ |
---|
4073 | var i; |
---|
4074 | if(this.isLocked()){ |
---|
4075 | return; |
---|
4076 | } |
---|
4077 | if(!keepExisting){ |
---|
4078 | this.clearSelections(); |
---|
4079 | } |
---|
4080 | if(startRow <= endRow){ |
---|
4081 | for(i = startRow; i <= endRow; i++){ |
---|
4082 | this.selectRow(i, true); |
---|
4083 | } |
---|
4084 | }else{ |
---|
4085 | for(i = startRow; i >= endRow; i--){ |
---|
4086 | this.selectRow(i, true); |
---|
4087 | } |
---|
4088 | } |
---|
4089 | }, |
---|
4090 | |
---|
4091 | /** |
---|
4092 | * Deselects a range of rows if the selection model |
---|
4093 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
4094 | * All rows in between startRow and endRow are also deselected. |
---|
4095 | * @param {Number} startRow The index of the first row in the range |
---|
4096 | * @param {Number} endRow The index of the last row in the range |
---|
4097 | */ |
---|
4098 | deselectRange : function(startRow, endRow, preventViewNotify){ |
---|
4099 | if(this.isLocked()){ |
---|
4100 | return; |
---|
4101 | } |
---|
4102 | for(var i = startRow; i <= endRow; i++){ |
---|
4103 | this.deselectRow(i, preventViewNotify); |
---|
4104 | } |
---|
4105 | }, |
---|
4106 | |
---|
4107 | /** |
---|
4108 | * Selects a row. Before selecting a row, checks if the selection model |
---|
4109 | * {@link Ext.grid.AbstractSelectionModel#isLocked is locked} and fires the |
---|
4110 | * {@link #beforerowselect} event. If these checks are satisfied the row |
---|
4111 | * will be selected and followed up by firing the {@link #rowselect} and |
---|
4112 | * {@link #selectionchange} events. |
---|
4113 | * @param {Number} row The index of the row to select |
---|
4114 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
4115 | * @param {Boolean} preventViewNotify (optional) Specify <tt>true</tt> to |
---|
4116 | * prevent notifying the view (disables updating the selected appearance) |
---|
4117 | */ |
---|
4118 | selectRow : function(index, keepExisting, preventViewNotify){ |
---|
4119 | if(this.isLocked() || (index < 0 || index >= this.grid.store.getCount()) || (keepExisting && this.isSelected(index))){ |
---|
4120 | return; |
---|
4121 | } |
---|
4122 | var r = this.grid.store.getAt(index); |
---|
4123 | if(r && this.fireEvent("beforerowselect", this, index, keepExisting, r) !== false){ |
---|
4124 | if(!keepExisting || this.singleSelect){ |
---|
4125 | this.clearSelections(); |
---|
4126 | } |
---|
4127 | this.selections.add(r); |
---|
4128 | this.last = this.lastActive = index; |
---|
4129 | if(!preventViewNotify){ |
---|
4130 | this.grid.getView().onRowSelect(index); |
---|
4131 | } |
---|
4132 | this.fireEvent("rowselect", this, index, r); |
---|
4133 | this.fireEvent("selectionchange", this); |
---|
4134 | } |
---|
4135 | }, |
---|
4136 | |
---|
4137 | /** |
---|
4138 | * Deselects a row. Before deselecting a row, checks if the selection model |
---|
4139 | * {@link Ext.grid.AbstractSelectionModel#isLocked is locked}. |
---|
4140 | * If this check is satisfied the row will be deselected and followed up by |
---|
4141 | * firing the {@link #rowdeselect} and {@link #selectionchange} events. |
---|
4142 | * @param {Number} row The index of the row to deselect |
---|
4143 | * @param {Boolean} preventViewNotify (optional) Specify <tt>true</tt> to |
---|
4144 | * prevent notifying the view (disables updating the selected appearance) |
---|
4145 | */ |
---|
4146 | deselectRow : function(index, preventViewNotify){ |
---|
4147 | if(this.isLocked()){ |
---|
4148 | return; |
---|
4149 | } |
---|
4150 | if(this.last == index){ |
---|
4151 | this.last = false; |
---|
4152 | } |
---|
4153 | if(this.lastActive == index){ |
---|
4154 | this.lastActive = false; |
---|
4155 | } |
---|
4156 | var r = this.grid.store.getAt(index); |
---|
4157 | if(r){ |
---|
4158 | this.selections.remove(r); |
---|
4159 | if(!preventViewNotify){ |
---|
4160 | this.grid.getView().onRowDeselect(index); |
---|
4161 | } |
---|
4162 | this.fireEvent("rowdeselect", this, index, r); |
---|
4163 | this.fireEvent("selectionchange", this); |
---|
4164 | } |
---|
4165 | }, |
---|
4166 | |
---|
4167 | // private |
---|
4168 | restoreLast : function(){ |
---|
4169 | if(this._last){ |
---|
4170 | this.last = this._last; |
---|
4171 | } |
---|
4172 | }, |
---|
4173 | |
---|
4174 | // private |
---|
4175 | acceptsNav : function(row, col, cm){ |
---|
4176 | return !cm.isHidden(col) && cm.isCellEditable(col, row); |
---|
4177 | }, |
---|
4178 | |
---|
4179 | // private |
---|
4180 | onEditorKey : function(field, e){ |
---|
4181 | var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor; |
---|
4182 | var shift = e.shiftKey; |
---|
4183 | if(k == e.TAB){ |
---|
4184 | e.stopEvent(); |
---|
4185 | ed.completeEdit(); |
---|
4186 | if(shift){ |
---|
4187 | newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this); |
---|
4188 | }else{ |
---|
4189 | newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this); |
---|
4190 | } |
---|
4191 | }else if(k == e.ENTER){ |
---|
4192 | e.stopEvent(); |
---|
4193 | ed.completeEdit(); |
---|
4194 | if(this.moveEditorOnEnter !== false){ |
---|
4195 | if(shift){ |
---|
4196 | newCell = g.walkCells(ed.row - 1, ed.col, -1, this.acceptsNav, this); |
---|
4197 | }else{ |
---|
4198 | newCell = g.walkCells(ed.row + 1, ed.col, 1, this.acceptsNav, this); |
---|
4199 | } |
---|
4200 | } |
---|
4201 | }else if(k == e.ESC){ |
---|
4202 | ed.cancelEdit(); |
---|
4203 | } |
---|
4204 | if(newCell){ |
---|
4205 | g.startEditing(newCell[0], newCell[1]); |
---|
4206 | } |
---|
4207 | }, |
---|
4208 | |
---|
4209 | destroy: function(){ |
---|
4210 | if(this.rowNav){ |
---|
4211 | this.rowNav.disable(); |
---|
4212 | this.rowNav = null; |
---|
4213 | } |
---|
4214 | Ext.grid.RowSelectionModel.superclass.destroy.call(this); |
---|
4215 | } |
---|
4216 | });/** |
---|
4217 | * @class Ext.grid.Column |
---|
4218 | * <p>This class encapsulates column configuration data to be used in the initialization of a |
---|
4219 | * {@link Ext.grid.ColumnModel ColumnModel}.</p> |
---|
4220 | * <p>While subclasses are provided to render data in different ways, this class renders a passed |
---|
4221 | * data field unchanged and is usually used for textual columns.</p> |
---|
4222 | */ |
---|
4223 | Ext.grid.Column = function(config){ |
---|
4224 | Ext.apply(this, config); |
---|
4225 | |
---|
4226 | if(typeof this.renderer == 'string'){ |
---|
4227 | this.renderer = Ext.util.Format[this.renderer]; |
---|
4228 | } else if(Ext.isObject(this.renderer)){ |
---|
4229 | this.scope = this.renderer.scope; |
---|
4230 | this.renderer = this.renderer.fn; |
---|
4231 | } |
---|
4232 | this.renderer = this.renderer.createDelegate(this.scope || config); |
---|
4233 | |
---|
4234 | if(this.id === undefined){ |
---|
4235 | this.id = ++Ext.grid.Column.AUTO_ID; |
---|
4236 | } |
---|
4237 | if(this.editor){ |
---|
4238 | this.editor = Ext.create(this.editor, 'textfield'); |
---|
4239 | } |
---|
4240 | }; |
---|
4241 | |
---|
4242 | Ext.grid.Column.AUTO_ID = 0; |
---|
4243 | |
---|
4244 | Ext.grid.Column.prototype = { |
---|
4245 | /** |
---|
4246 | * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured |
---|
4247 | * <tt>{@link #editor}</tt>. Set to <tt>false</tt> to initially disable editing on this column. |
---|
4248 | * The initial configuration may be dynamically altered using |
---|
4249 | * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}. |
---|
4250 | */ |
---|
4251 | /** |
---|
4252 | * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial |
---|
4253 | * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all |
---|
4254 | * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be |
---|
4255 | * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre> |
---|
4256 | * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre> |
---|
4257 | * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre> |
---|
4258 | * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this |
---|
4259 | * unique identifier. |
---|
4260 | */ |
---|
4261 | /** |
---|
4262 | * @cfg {String} header Optional. The header text to be used as innerHTML |
---|
4263 | * (html tags are accepted) to display in the Grid view. <b>Note</b>: to |
---|
4264 | * have a clickable header with no text displayed use <tt>' '</tt>. |
---|
4265 | */ |
---|
4266 | /** |
---|
4267 | * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
4268 | * may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>, |
---|
4269 | * which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the |
---|
4270 | * group option in the header menu for the column. See also <code>{@link #groupName}</code>. |
---|
4271 | */ |
---|
4272 | /** |
---|
4273 | * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
4274 | * may be used to specify the text with which to prefix the group field value in the group header line. |
---|
4275 | * See also {@link #groupRenderer} and |
---|
4276 | * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}. |
---|
4277 | */ |
---|
4278 | /** |
---|
4279 | * @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
4280 | * may be used to specify the function used to format the grouping field value for display in the group |
---|
4281 | * {@link #groupName header}. If a <tt><b>groupRenderer</b></tt> is not specified, the configured |
---|
4282 | * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified |
---|
4283 | * the new value of the group field will be used.</p> |
---|
4284 | * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be |
---|
4285 | * passed the following parameters: |
---|
4286 | * <div class="mdetail-params"><ul> |
---|
4287 | * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li> |
---|
4288 | * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li> |
---|
4289 | * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data |
---|
4290 | * for the row which caused group change.</p></li> |
---|
4291 | * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li> |
---|
4292 | * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li> |
---|
4293 | * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li> |
---|
4294 | * </ul></div></p> |
---|
4295 | * <p>The function should return a string value.</p> |
---|
4296 | */ |
---|
4297 | /** |
---|
4298 | * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
4299 | * may be used to specify the text to display when there is an empty group value. Defaults to the |
---|
4300 | * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}. |
---|
4301 | */ |
---|
4302 | /** |
---|
4303 | * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the |
---|
4304 | * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from |
---|
4305 | * which to draw the column's value.</p> |
---|
4306 | */ |
---|
4307 | /** |
---|
4308 | * @cfg {Number} width |
---|
4309 | * Optional. The initial width in pixels of the column. |
---|
4310 | * The width of each column can also be affected if any of the following are configured: |
---|
4311 | * <div class="mdetail-params"><ul> |
---|
4312 | * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li> |
---|
4313 | * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt> |
---|
4314 | * <div class="sub-desc"> |
---|
4315 | * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be |
---|
4316 | * re-proportioned (based on the relative initial widths) to fill the width of the grid so |
---|
4317 | * that no horizontal scrollbar is shown.</p> |
---|
4318 | * </div></li> |
---|
4319 | * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li> |
---|
4320 | * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li> |
---|
4321 | * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side |
---|
4322 | * is reserved for the vertical scrollbar. The |
---|
4323 | * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt> |
---|
4324 | * can be modified to reduce or eliminate the reserved offset.</p> |
---|
4325 | */ |
---|
4326 | /** |
---|
4327 | * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column. |
---|
4328 | * Defaults to the value of the {@link #defaultSortable} property. |
---|
4329 | * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}. |
---|
4330 | */ |
---|
4331 | /** |
---|
4332 | * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>. |
---|
4333 | */ |
---|
4334 | /** |
---|
4335 | * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>. |
---|
4336 | */ |
---|
4337 | /** |
---|
4338 | * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>. |
---|
4339 | */ |
---|
4340 | /** |
---|
4341 | * @cfg {Boolean} hidden Optional. <tt>true</tt> to hide the column. Defaults to <tt>false</tt>. |
---|
4342 | */ |
---|
4343 | /** |
---|
4344 | * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips |
---|
4345 | * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the |
---|
4346 | * header's HTML title attribute. Defaults to ''. |
---|
4347 | */ |
---|
4348 | /** |
---|
4349 | * @cfg {Mixed} renderer |
---|
4350 | * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p> |
---|
4351 | * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value, |
---|
4352 | * appearance, etc.) before it is rendered). This may be specified in either of three ways: |
---|
4353 | * <div class="mdetail-params"><ul> |
---|
4354 | * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li> |
---|
4355 | * <li>A string which references a property name of the {@link Ext.util.Format} class which |
---|
4356 | * provides a renderer function.</li> |
---|
4357 | * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt> |
---|
4358 | * reference) e.g.:<pre style="margin-left:1.2em"><code> |
---|
4359 | { |
---|
4360 | fn: this.gridRenderer, |
---|
4361 | scope: this |
---|
4362 | } |
---|
4363 | </code></pre></li></ul></div> |
---|
4364 | * If not specified, the default renderer uses the raw data value.</p> |
---|
4365 | * <p>For information about the renderer function (passed parameters, etc.), see |
---|
4366 | * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code> |
---|
4367 | var companyColumn = { |
---|
4368 | header: 'Company Name', |
---|
4369 | dataIndex: 'company', |
---|
4370 | renderer: function(value, metaData, record, rowIndex, colIndex, store) { |
---|
4371 | // provide the logic depending on business rules |
---|
4372 | // name of your own choosing to manipulate the cell depending upon |
---|
4373 | // the data in the underlying Record object. |
---|
4374 | if (value == 'whatever') { |
---|
4375 | //metaData.css : String : A CSS class name to add to the TD element of the cell. |
---|
4376 | //metaData.attr : String : An html attribute definition string to apply to |
---|
4377 | // the data container element within the table |
---|
4378 | // cell (e.g. 'style="color:red;"'). |
---|
4379 | metaData.css = 'name-of-css-class-you-will-define'; |
---|
4380 | } |
---|
4381 | return value; |
---|
4382 | } |
---|
4383 | } |
---|
4384 | * </code></pre> |
---|
4385 | * See also {@link #scope}. |
---|
4386 | */ |
---|
4387 | /** |
---|
4388 | * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass |
---|
4389 | * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily |
---|
4390 | * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are: |
---|
4391 | * <div class="mdetail-params"><ul> |
---|
4392 | * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li> |
---|
4393 | * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li> |
---|
4394 | * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li> |
---|
4395 | * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li> |
---|
4396 | * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li> |
---|
4397 | * </ul></div> |
---|
4398 | * <p>Configuration properties for the specified <code>xtype</code> may be specified with |
---|
4399 | * the Column configuration properties, for example:</p> |
---|
4400 | * <pre><code> |
---|
4401 | var grid = new Ext.grid.GridPanel({ |
---|
4402 | ... |
---|
4403 | columns: [{ |
---|
4404 | header: 'Last Updated', |
---|
4405 | dataIndex: 'lastChange', |
---|
4406 | width: 85, |
---|
4407 | sortable: true, |
---|
4408 | //renderer: Ext.util.Format.dateRenderer('m/d/Y'), |
---|
4409 | xtype: 'datecolumn', // use xtype instead of renderer |
---|
4410 | format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn} |
---|
4411 | }, { |
---|
4412 | ... |
---|
4413 | }] |
---|
4414 | }); |
---|
4415 | * </code></pre> |
---|
4416 | */ |
---|
4417 | /** |
---|
4418 | * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the |
---|
4419 | * renderer. Defaults to the Column configuration object. |
---|
4420 | */ |
---|
4421 | /** |
---|
4422 | * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined. |
---|
4423 | */ |
---|
4424 | /** |
---|
4425 | * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column |
---|
4426 | * (excluding headers). Defaults to undefined. |
---|
4427 | */ |
---|
4428 | /** |
---|
4429 | * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column |
---|
4430 | * (defaults to true). To disallow column hiding globally for all columns in the grid, use |
---|
4431 | * {@link Ext.grid.GridPanel#enableColumnHide} instead. |
---|
4432 | */ |
---|
4433 | /** |
---|
4434 | * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column |
---|
4435 | * if editing is supported by the grid. See <tt>{@link #editable}</tt> also. |
---|
4436 | */ |
---|
4437 | |
---|
4438 | // private. Used by ColumnModel to avoid reprocessing |
---|
4439 | isColumn : true, |
---|
4440 | /** |
---|
4441 | * Optional. A function which returns displayable data when passed the following parameters: |
---|
4442 | * <div class="mdetail-params"><ul> |
---|
4443 | * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> |
---|
4444 | * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> |
---|
4445 | * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> |
---|
4446 | * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container |
---|
4447 | * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li> |
---|
4448 | * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was |
---|
4449 | * extracted.</p></li> |
---|
4450 | * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> |
---|
4451 | * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> |
---|
4452 | * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record |
---|
4453 | * was extracted.</p></li> |
---|
4454 | * </ul></div> |
---|
4455 | * @property renderer |
---|
4456 | * @type Function |
---|
4457 | */ |
---|
4458 | renderer : function(value){ |
---|
4459 | if(typeof value == 'string' && value.length < 1){ |
---|
4460 | return ' '; |
---|
4461 | } |
---|
4462 | return value; |
---|
4463 | }, |
---|
4464 | |
---|
4465 | // private |
---|
4466 | getEditor: function(rowIndex){ |
---|
4467 | return this.editable !== false ? this.editor : null; |
---|
4468 | }, |
---|
4469 | |
---|
4470 | /** |
---|
4471 | * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field} |
---|
4472 | * used to edit the cell. |
---|
4473 | * @param {Number} rowIndex The row index |
---|
4474 | * @return {Ext.Editor} |
---|
4475 | */ |
---|
4476 | getCellEditor: function(rowIndex){ |
---|
4477 | var editor = this.getEditor(rowIndex); |
---|
4478 | if(editor){ |
---|
4479 | if(!editor.startEdit){ |
---|
4480 | if(!editor.gridEditor){ |
---|
4481 | editor.gridEditor = new Ext.grid.GridEditor(editor); |
---|
4482 | } |
---|
4483 | return editor.gridEditor; |
---|
4484 | }else if(editor.startEdit){ |
---|
4485 | return editor; |
---|
4486 | } |
---|
4487 | } |
---|
4488 | return null; |
---|
4489 | } |
---|
4490 | }; |
---|
4491 | |
---|
4492 | /** |
---|
4493 | * @class Ext.grid.BooleanColumn |
---|
4494 | * @extends Ext.grid.Column |
---|
4495 | * <p>A Column definition class which renders boolean data fields. See the {@link Ext.grid.ColumnModel#xtype xtype} |
---|
4496 | * config option of {@link Ext.grid.ColumnModel} for more details.</p> |
---|
4497 | */ |
---|
4498 | Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, { |
---|
4499 | /** |
---|
4500 | * @cfg {String} trueText |
---|
4501 | * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>). |
---|
4502 | */ |
---|
4503 | trueText: 'true', |
---|
4504 | /** |
---|
4505 | * @cfg {String} falseText |
---|
4506 | * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to |
---|
4507 | * <tt>'false'</tt>). |
---|
4508 | */ |
---|
4509 | falseText: 'false', |
---|
4510 | /** |
---|
4511 | * @cfg {String} undefinedText |
---|
4512 | * The string returned by the renderer when the column value is undefined (defaults to <tt>' '</tt>). |
---|
4513 | */ |
---|
4514 | undefinedText: ' ', |
---|
4515 | |
---|
4516 | constructor: function(cfg){ |
---|
4517 | Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg); |
---|
4518 | var t = this.trueText, f = this.falseText, u = this.undefinedText; |
---|
4519 | this.renderer = function(v){ |
---|
4520 | if(v === undefined){ |
---|
4521 | return u; |
---|
4522 | } |
---|
4523 | if(!v || v === 'false'){ |
---|
4524 | return f; |
---|
4525 | } |
---|
4526 | return t; |
---|
4527 | }; |
---|
4528 | } |
---|
4529 | }); |
---|
4530 | |
---|
4531 | /** |
---|
4532 | * @class Ext.grid.NumberColumn |
---|
4533 | * @extends Ext.grid.Column |
---|
4534 | * <p>A Column definition class which renders a numeric data field according to a {@link #format} string. See the |
---|
4535 | * {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more details.</p> |
---|
4536 | */ |
---|
4537 | Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, { |
---|
4538 | /** |
---|
4539 | * @cfg {String} format |
---|
4540 | * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column |
---|
4541 | * (defaults to <tt>'0,000.00'</tt>). |
---|
4542 | */ |
---|
4543 | format : '0,000.00', |
---|
4544 | constructor: function(cfg){ |
---|
4545 | Ext.grid.NumberColumn.superclass.constructor.call(this, cfg); |
---|
4546 | this.renderer = Ext.util.Format.numberRenderer(this.format); |
---|
4547 | } |
---|
4548 | }); |
---|
4549 | |
---|
4550 | /** |
---|
4551 | * @class Ext.grid.DateColumn |
---|
4552 | * @extends Ext.grid.Column |
---|
4553 | * <p>A Column definition class which renders a passed date according to the default locale, or a configured |
---|
4554 | * {@link #format}. See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} |
---|
4555 | * for more details.</p> |
---|
4556 | */ |
---|
4557 | Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, { |
---|
4558 | /** |
---|
4559 | * @cfg {String} format |
---|
4560 | * A formatting string as used by {@link Date#format} to format a Date for this Column |
---|
4561 | * (defaults to <tt>'m/d/Y'</tt>). |
---|
4562 | */ |
---|
4563 | format : 'm/d/Y', |
---|
4564 | constructor: function(cfg){ |
---|
4565 | Ext.grid.DateColumn.superclass.constructor.call(this, cfg); |
---|
4566 | this.renderer = Ext.util.Format.dateRenderer(this.format); |
---|
4567 | } |
---|
4568 | }); |
---|
4569 | |
---|
4570 | /** |
---|
4571 | * @class Ext.grid.TemplateColumn |
---|
4572 | * @extends Ext.grid.Column |
---|
4573 | * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s |
---|
4574 | * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}. |
---|
4575 | * See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more |
---|
4576 | * details.</p> |
---|
4577 | */ |
---|
4578 | Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { |
---|
4579 | /** |
---|
4580 | * @cfg {String/XTemplate} tpl |
---|
4581 | * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a |
---|
4582 | * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value. |
---|
4583 | */ |
---|
4584 | constructor: function(cfg){ |
---|
4585 | Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg); |
---|
4586 | var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl); |
---|
4587 | this.renderer = function(value, p, r){ |
---|
4588 | return tpl.apply(r.data); |
---|
4589 | }; |
---|
4590 | this.tpl = tpl; |
---|
4591 | } |
---|
4592 | }); |
---|
4593 | |
---|
4594 | /* |
---|
4595 | * @property types |
---|
4596 | * @type Object |
---|
4597 | * @member Ext.grid.Column |
---|
4598 | * @static |
---|
4599 | * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced |
---|
4600 | * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p> |
---|
4601 | * <p>This contains the following properties</p><div class="mdesc-details"><ul> |
---|
4602 | * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li> |
---|
4603 | * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li> |
---|
4604 | * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li> |
---|
4605 | * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li> |
---|
4606 | * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li> |
---|
4607 | * </ul></div> |
---|
4608 | */ |
---|
4609 | Ext.grid.Column.types = { |
---|
4610 | gridcolumn : Ext.grid.Column, |
---|
4611 | booleancolumn: Ext.grid.BooleanColumn, |
---|
4612 | numbercolumn: Ext.grid.NumberColumn, |
---|
4613 | datecolumn: Ext.grid.DateColumn, |
---|
4614 | templatecolumn: Ext.grid.TemplateColumn |
---|
4615 | };/** |
---|
4616 | * @class Ext.grid.RowNumberer |
---|
4617 | * This is a utility class that can be passed into a {@link Ext.grid.ColumnModel} as a column config that provides |
---|
4618 | * an automatic row numbering column. |
---|
4619 | * <br>Usage:<br> |
---|
4620 | <pre><code> |
---|
4621 | // This is a typical column config with the first column providing row numbers |
---|
4622 | var colModel = new Ext.grid.ColumnModel([ |
---|
4623 | new Ext.grid.RowNumberer(), |
---|
4624 | {header: "Name", width: 80, sortable: true}, |
---|
4625 | {header: "Code", width: 50, sortable: true}, |
---|
4626 | {header: "Description", width: 200, sortable: true} |
---|
4627 | ]); |
---|
4628 | </code></pre> |
---|
4629 | * @constructor |
---|
4630 | * @param {Object} config The configuration options |
---|
4631 | */ |
---|
4632 | Ext.grid.RowNumberer = function(config){ |
---|
4633 | Ext.apply(this, config); |
---|
4634 | if(this.rowspan){ |
---|
4635 | this.renderer = this.renderer.createDelegate(this); |
---|
4636 | } |
---|
4637 | }; |
---|
4638 | |
---|
4639 | Ext.grid.RowNumberer.prototype = { |
---|
4640 | /** |
---|
4641 | * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the row |
---|
4642 | * number column (defaults to ''). |
---|
4643 | */ |
---|
4644 | header: "", |
---|
4645 | /** |
---|
4646 | * @cfg {Number} width The default width in pixels of the row number column (defaults to 23). |
---|
4647 | */ |
---|
4648 | width: 23, |
---|
4649 | /** |
---|
4650 | * @cfg {Boolean} sortable True if the row number column is sortable (defaults to false). |
---|
4651 | * @hide |
---|
4652 | */ |
---|
4653 | sortable: false, |
---|
4654 | |
---|
4655 | // private |
---|
4656 | fixed:true, |
---|
4657 | menuDisabled:true, |
---|
4658 | dataIndex: '', |
---|
4659 | id: 'numberer', |
---|
4660 | rowspan: undefined, |
---|
4661 | |
---|
4662 | // private |
---|
4663 | renderer : function(v, p, record, rowIndex){ |
---|
4664 | if(this.rowspan){ |
---|
4665 | p.cellAttr = 'rowspan="'+this.rowspan+'"'; |
---|
4666 | } |
---|
4667 | return rowIndex+1; |
---|
4668 | } |
---|
4669 | };/** |
---|
4670 | * @class Ext.grid.CheckboxSelectionModel |
---|
4671 | * @extends Ext.grid.RowSelectionModel |
---|
4672 | * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows. |
---|
4673 | * @constructor |
---|
4674 | * @param {Object} config The configuration options |
---|
4675 | */ |
---|
4676 | Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { |
---|
4677 | |
---|
4678 | /** |
---|
4679 | * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the |
---|
4680 | * checkbox column (defaults to <tt>false</tt>). |
---|
4681 | */ |
---|
4682 | /** |
---|
4683 | * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the |
---|
4684 | * checkbox column. Defaults to:<pre><code> |
---|
4685 | * '<div class="x-grid3-hd-checker">&#160;</div>'</tt> |
---|
4686 | * </code></pre> |
---|
4687 | * The default CSS class of <tt>'x-grid3-hd-checker'</tt> displays a checkbox in the header |
---|
4688 | * and provides support for automatic check all/none behavior on header click. This string |
---|
4689 | * can be replaced by any valid HTML fragment, including a simple text string (e.g., |
---|
4690 | * <tt>'Select Rows'</tt>), but the automatic check all/none behavior will only work if the |
---|
4691 | * <tt>'x-grid3-hd-checker'</tt> class is supplied. |
---|
4692 | */ |
---|
4693 | header: '<div class="x-grid3-hd-checker"> </div>', |
---|
4694 | /** |
---|
4695 | * @cfg {Number} width The default width in pixels of the checkbox column (defaults to <tt>20</tt>). |
---|
4696 | */ |
---|
4697 | width: 20, |
---|
4698 | /** |
---|
4699 | * @cfg {Boolean} sortable <tt>true</tt> if the checkbox column is sortable (defaults to |
---|
4700 | * <tt>false</tt>). |
---|
4701 | */ |
---|
4702 | sortable: false, |
---|
4703 | |
---|
4704 | // private |
---|
4705 | menuDisabled:true, |
---|
4706 | fixed:true, |
---|
4707 | dataIndex: '', |
---|
4708 | id: 'checker', |
---|
4709 | |
---|
4710 | constructor: function(){ |
---|
4711 | Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments); |
---|
4712 | |
---|
4713 | if(this.checkOnly){ |
---|
4714 | this.handleMouseDown = Ext.emptyFn; |
---|
4715 | } |
---|
4716 | }, |
---|
4717 | |
---|
4718 | // private |
---|
4719 | initEvents : function(){ |
---|
4720 | Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this); |
---|
4721 | this.grid.on('render', function(){ |
---|
4722 | var view = this.grid.getView(); |
---|
4723 | view.mainBody.on('mousedown', this.onMouseDown, this); |
---|
4724 | Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); |
---|
4725 | |
---|
4726 | }, this); |
---|
4727 | }, |
---|
4728 | |
---|
4729 | // private |
---|
4730 | onMouseDown : function(e, t){ |
---|
4731 | if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click |
---|
4732 | e.stopEvent(); |
---|
4733 | var row = e.getTarget('.x-grid3-row'); |
---|
4734 | if(row){ |
---|
4735 | var index = row.rowIndex; |
---|
4736 | if(this.isSelected(index)){ |
---|
4737 | this.deselectRow(index); |
---|
4738 | }else{ |
---|
4739 | this.selectRow(index, true); |
---|
4740 | } |
---|
4741 | } |
---|
4742 | } |
---|
4743 | }, |
---|
4744 | |
---|
4745 | // private |
---|
4746 | onHdMouseDown : function(e, t){ |
---|
4747 | if(t.className == 'x-grid3-hd-checker'){ |
---|
4748 | e.stopEvent(); |
---|
4749 | var hd = Ext.fly(t.parentNode); |
---|
4750 | var isChecked = hd.hasClass('x-grid3-hd-checker-on'); |
---|
4751 | if(isChecked){ |
---|
4752 | hd.removeClass('x-grid3-hd-checker-on'); |
---|
4753 | this.clearSelections(); |
---|
4754 | }else{ |
---|
4755 | hd.addClass('x-grid3-hd-checker-on'); |
---|
4756 | this.selectAll(); |
---|
4757 | } |
---|
4758 | } |
---|
4759 | }, |
---|
4760 | |
---|
4761 | // private |
---|
4762 | renderer : function(v, p, record){ |
---|
4763 | return '<div class="x-grid3-row-checker"> </div>'; |
---|
4764 | } |
---|
4765 | }); |
---|