1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /** |
---|
10 | * @class Ext.DataView |
---|
11 | * @extends Ext.BoxComponent |
---|
12 | * A mechanism for displaying data using custom layout templates and formatting. DataView uses an {@link Ext.XTemplate} |
---|
13 | * as its internal templating mechanism, and is bound to an {@link Ext.data.Store} |
---|
14 | * so that as the data in the store changes the view is automatically updated to reflect the changes. The view also |
---|
15 | * provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, |
---|
16 | * mouseover, mouseout, etc. as well as a built-in selection model. <b>In order to use these features, an {@link #itemSelector} |
---|
17 | * config must be provided for the DataView to determine what nodes it will be working with.</b> |
---|
18 | * |
---|
19 | * <p>The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.Panel}.</p> |
---|
20 | * <pre><code> |
---|
21 | var store = new Ext.data.JsonStore({ |
---|
22 | url: 'get-images.php', |
---|
23 | root: 'images', |
---|
24 | fields: [ |
---|
25 | 'name', 'url', |
---|
26 | {name:'size', type: 'float'}, |
---|
27 | {name:'lastmod', type:'date', dateFormat:'timestamp'} |
---|
28 | ] |
---|
29 | }); |
---|
30 | store.load(); |
---|
31 | |
---|
32 | var tpl = new Ext.XTemplate( |
---|
33 | '<tpl for=".">', |
---|
34 | '<div class="thumb-wrap" id="{name}">', |
---|
35 | '<div class="thumb"><img src="{url}" title="{name}"></div>', |
---|
36 | '<span class="x-editable">{shortName}</span></div>', |
---|
37 | '</tpl>', |
---|
38 | '<div class="x-clear"></div>' |
---|
39 | ); |
---|
40 | |
---|
41 | var panel = new Ext.Panel({ |
---|
42 | id:'images-view', |
---|
43 | frame:true, |
---|
44 | width:535, |
---|
45 | autoHeight:true, |
---|
46 | collapsible:true, |
---|
47 | layout:'fit', |
---|
48 | title:'Simple DataView', |
---|
49 | |
---|
50 | items: new Ext.DataView({ |
---|
51 | store: store, |
---|
52 | tpl: tpl, |
---|
53 | autoHeight:true, |
---|
54 | multiSelect: true, |
---|
55 | overClass:'x-view-over', |
---|
56 | itemSelector:'div.thumb-wrap', |
---|
57 | emptyText: 'No images to display' |
---|
58 | }) |
---|
59 | }); |
---|
60 | panel.render(document.body); |
---|
61 | </code></pre> |
---|
62 | * @constructor |
---|
63 | * Create a new DataView |
---|
64 | * @param {Object} config The config object |
---|
65 | */ |
---|
66 | Ext.DataView = Ext.extend(Ext.BoxComponent, { |
---|
67 | /** |
---|
68 | * @cfg {String/Array} tpl |
---|
69 | * The HTML fragment or an array of fragments that will make up the template used by this DataView. This should |
---|
70 | * be specified in the same format expected by the constructor of {@link Ext.XTemplate}. |
---|
71 | */ |
---|
72 | /** |
---|
73 | * @cfg {Ext.data.Store} store |
---|
74 | * The {@link Ext.data.Store} to bind this DataView to. |
---|
75 | */ |
---|
76 | /** |
---|
77 | * @cfg {String} itemSelector |
---|
78 | * <b>This is a required setting</b>. A simple CSS selector (e.g. div.some-class or span:first-child) that will be |
---|
79 | * used to determine what nodes this DataView will be working with. |
---|
80 | */ |
---|
81 | /** |
---|
82 | * @cfg {Boolean} multiSelect |
---|
83 | * True to allow selection of more than one item at a time, false to allow selection of only a single item |
---|
84 | * at a time or no selection at all, depending on the value of {@link #singleSelect} (defaults to false). |
---|
85 | */ |
---|
86 | /** |
---|
87 | * @cfg {Boolean} singleSelect |
---|
88 | * True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false). |
---|
89 | * Note that if {@link #multiSelect} = true, this value will be ignored. |
---|
90 | */ |
---|
91 | /** |
---|
92 | * @cfg {Boolean} simpleSelect |
---|
93 | * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, |
---|
94 | * false to force the user to hold Ctrl or Shift to select more than on item (defaults to false). |
---|
95 | */ |
---|
96 | /** |
---|
97 | * @cfg {String} overClass |
---|
98 | * A CSS class to apply to each item in the view on mouseover (defaults to undefined). |
---|
99 | */ |
---|
100 | /** |
---|
101 | * @cfg {String} loadingText |
---|
102 | * A string to display during data load operations (defaults to undefined). If specified, this text will be |
---|
103 | * displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's |
---|
104 | * contents will continue to display normally until the new data is loaded and the contents are replaced. |
---|
105 | */ |
---|
106 | /** |
---|
107 | * @cfg {String} selectedClass |
---|
108 | * A CSS class to apply to each selected item in the view (defaults to 'x-view-selected'). |
---|
109 | */ |
---|
110 | selectedClass : "x-view-selected", |
---|
111 | /** |
---|
112 | * @cfg {String} emptyText |
---|
113 | * The text to display in the view when there is no data to display (defaults to ''). |
---|
114 | */ |
---|
115 | emptyText : "", |
---|
116 | |
---|
117 | /** |
---|
118 | * @cfg {Boolean} deferEmptyText True to defer emptyText being applied until the store's first load |
---|
119 | */ |
---|
120 | deferEmptyText: true, |
---|
121 | /** |
---|
122 | * @cfg {Boolean} trackOver True to enable mouseenter and mouseleave events |
---|
123 | */ |
---|
124 | trackOver: false, |
---|
125 | |
---|
126 | //private |
---|
127 | last: false, |
---|
128 | |
---|
129 | |
---|
130 | // private |
---|
131 | initComponent : function(){ |
---|
132 | Ext.DataView.superclass.initComponent.call(this); |
---|
133 | if(typeof this.tpl == "string"){ |
---|
134 | this.tpl = new Ext.XTemplate(this.tpl); |
---|
135 | } |
---|
136 | |
---|
137 | this.addEvents( |
---|
138 | /** |
---|
139 | * @event beforeclick |
---|
140 | * Fires before a click is processed. Returns false to cancel the default action. |
---|
141 | * @param {Ext.DataView} this |
---|
142 | * @param {Number} index The index of the target node |
---|
143 | * @param {HTMLElement} node The target node |
---|
144 | * @param {Ext.EventObject} e The raw event object |
---|
145 | */ |
---|
146 | "beforeclick", |
---|
147 | /** |
---|
148 | * @event click |
---|
149 | * Fires when a template node is clicked. |
---|
150 | * @param {Ext.DataView} this |
---|
151 | * @param {Number} index The index of the target node |
---|
152 | * @param {HTMLElement} node The target node |
---|
153 | * @param {Ext.EventObject} e The raw event object |
---|
154 | */ |
---|
155 | "click", |
---|
156 | /** |
---|
157 | * @event mouseenter |
---|
158 | * Fires when the mouse enters a template node. trackOver:true or an overCls must be set to enable this event. |
---|
159 | * @param {Ext.DataView} this |
---|
160 | * @param {Number} index The index of the target node |
---|
161 | * @param {HTMLElement} node The target node |
---|
162 | * @param {Ext.EventObject} e The raw event object |
---|
163 | */ |
---|
164 | "mouseenter", |
---|
165 | /** |
---|
166 | * @event mouseleave |
---|
167 | * Fires when the mouse leaves a template node. trackOver:true or an overCls must be set to enable this event. |
---|
168 | * @param {Ext.DataView} this |
---|
169 | * @param {Number} index The index of the target node |
---|
170 | * @param {HTMLElement} node The target node |
---|
171 | * @param {Ext.EventObject} e The raw event object |
---|
172 | */ |
---|
173 | "mouseleave", |
---|
174 | /** |
---|
175 | * @event containerclick |
---|
176 | * Fires when a click occurs and it is not on a template node. |
---|
177 | * @param {Ext.DataView} this |
---|
178 | * @param {Ext.EventObject} e The raw event object |
---|
179 | */ |
---|
180 | "containerclick", |
---|
181 | /** |
---|
182 | * @event dblclick |
---|
183 | * Fires when a template node is double clicked. |
---|
184 | * @param {Ext.DataView} this |
---|
185 | * @param {Number} index The index of the target node |
---|
186 | * @param {HTMLElement} node The target node |
---|
187 | * @param {Ext.EventObject} e The raw event object |
---|
188 | */ |
---|
189 | "dblclick", |
---|
190 | /** |
---|
191 | * @event contextmenu |
---|
192 | * Fires when a template node is right clicked. |
---|
193 | * @param {Ext.DataView} this |
---|
194 | * @param {Number} index The index of the target node |
---|
195 | * @param {HTMLElement} node The target node |
---|
196 | * @param {Ext.EventObject} e The raw event object |
---|
197 | */ |
---|
198 | "contextmenu", |
---|
199 | /** |
---|
200 | * @event selectionchange |
---|
201 | * Fires when the selected nodes change. |
---|
202 | * @param {Ext.DataView} this |
---|
203 | * @param {Array} selections Array of the selected nodes |
---|
204 | */ |
---|
205 | "selectionchange", |
---|
206 | |
---|
207 | /** |
---|
208 | * @event beforeselect |
---|
209 | * Fires before a selection is made. If any handlers return false, the selection is cancelled. |
---|
210 | * @param {Ext.DataView} this |
---|
211 | * @param {HTMLElement} node The node to be selected |
---|
212 | * @param {Array} selections Array of currently selected nodes |
---|
213 | */ |
---|
214 | "beforeselect" |
---|
215 | ); |
---|
216 | |
---|
217 | this.all = new Ext.CompositeElementLite(); |
---|
218 | this.selected = new Ext.CompositeElementLite(); |
---|
219 | }, |
---|
220 | |
---|
221 | // private |
---|
222 | onRender : function(){ |
---|
223 | if(!this.el){ |
---|
224 | this.el = document.createElement('div'); |
---|
225 | this.el.id = this.id; |
---|
226 | } |
---|
227 | Ext.DataView.superclass.onRender.apply(this, arguments); |
---|
228 | }, |
---|
229 | |
---|
230 | // private |
---|
231 | afterRender : function(){ |
---|
232 | Ext.DataView.superclass.afterRender.call(this); |
---|
233 | |
---|
234 | this.el.on({ |
---|
235 | "click": this.onClick, |
---|
236 | "dblclick": this.onDblClick, |
---|
237 | "contextmenu": this.onContextMenu, |
---|
238 | scope:this |
---|
239 | }); |
---|
240 | |
---|
241 | if(this.overClass || this.trackOver){ |
---|
242 | this.el.on({ |
---|
243 | "mouseover": this.onMouseOver, |
---|
244 | "mouseout": this.onMouseOut, |
---|
245 | scope:this |
---|
246 | }); |
---|
247 | } |
---|
248 | |
---|
249 | if(this.store){ |
---|
250 | this.setStore(this.store, true); |
---|
251 | } |
---|
252 | }, |
---|
253 | |
---|
254 | /** |
---|
255 | * Refreshes the view by reloading the data from the store and re-rendering the template. |
---|
256 | */ |
---|
257 | refresh : function(){ |
---|
258 | this.clearSelections(false, true); |
---|
259 | this.el.update(""); |
---|
260 | var records = this.store.getRange(); |
---|
261 | if(records.length < 1){ |
---|
262 | if(!this.deferEmptyText || this.hasSkippedEmptyText){ |
---|
263 | this.el.update(this.emptyText); |
---|
264 | } |
---|
265 | this.hasSkippedEmptyText = true; |
---|
266 | this.all.clear(); |
---|
267 | return; |
---|
268 | } |
---|
269 | this.tpl.overwrite(this.el, this.collectData(records, 0)); |
---|
270 | this.all.fill(Ext.query(this.itemSelector, this.el.dom)); |
---|
271 | this.updateIndexes(0); |
---|
272 | }, |
---|
273 | |
---|
274 | /** |
---|
275 | * Function which can be overridden to provide custom formatting for each Record that is used by this |
---|
276 | * DataView's {@link #tpl template} to render each node. |
---|
277 | * @param {Array/Object} data The raw data object that was used to create the Record. |
---|
278 | * @param {Number} recordIndex the index number of the Record being prepared for rendering. |
---|
279 | * @param {Record} record The Record being prepared for rendering. |
---|
280 | * @return {Array/Object} The formatted data in a format expected by the internal {@link #tpl template}'s overwrite() method. |
---|
281 | * (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})) |
---|
282 | */ |
---|
283 | prepareData : function(data){ |
---|
284 | return data; |
---|
285 | }, |
---|
286 | |
---|
287 | /** |
---|
288 | * <p>Function which can be overridden which returns the data object passed to this |
---|
289 | * DataView's {@link #tpl template} to render the whole DataView.</p> |
---|
290 | * <p>This is usually an Array of data objects, each element of which is processed by an |
---|
291 | * {@link Ext.XTemplate XTemplate} which uses <tt>'<tpl for=".">'</tt> to iterate over its supplied |
---|
292 | * data object as an Array. However, <i>named</i> properties may be placed into the data object to |
---|
293 | * provide non-repeating data such as headings, totals etc.</p> |
---|
294 | * @param records {Array} An Array of {@link Ext.data.Record}s to be rendered into the DataView. |
---|
295 | * @return {Array} An Array of data objects to be processed by a repeating XTemplate. May also |
---|
296 | * contain <i>named</i> properties. |
---|
297 | */ |
---|
298 | collectData : function(records, startIndex){ |
---|
299 | var r = []; |
---|
300 | for(var i = 0, len = records.length; i < len; i++){ |
---|
301 | r[r.length] = this.prepareData(records[i].data, startIndex+i, records[i]); |
---|
302 | } |
---|
303 | return r; |
---|
304 | }, |
---|
305 | |
---|
306 | // private |
---|
307 | bufferRender : function(records){ |
---|
308 | var div = document.createElement('div'); |
---|
309 | this.tpl.overwrite(div, this.collectData(records)); |
---|
310 | return Ext.query(this.itemSelector, div); |
---|
311 | }, |
---|
312 | |
---|
313 | // private |
---|
314 | onUpdate : function(ds, record){ |
---|
315 | var index = this.store.indexOf(record); |
---|
316 | var sel = this.isSelected(index); |
---|
317 | var original = this.all.elements[index]; |
---|
318 | var node = this.bufferRender([record], index)[0]; |
---|
319 | |
---|
320 | this.all.replaceElement(index, node, true); |
---|
321 | if(sel){ |
---|
322 | this.selected.replaceElement(original, node); |
---|
323 | this.all.item(index).addClass(this.selectedClass); |
---|
324 | } |
---|
325 | this.updateIndexes(index, index); |
---|
326 | }, |
---|
327 | |
---|
328 | // private |
---|
329 | onAdd : function(ds, records, index){ |
---|
330 | if(this.all.getCount() == 0){ |
---|
331 | this.refresh(); |
---|
332 | return; |
---|
333 | } |
---|
334 | var nodes = this.bufferRender(records, index), n, a = this.all.elements; |
---|
335 | if(index < this.all.getCount()){ |
---|
336 | n = this.all.item(index).insertSibling(nodes, 'before', true); |
---|
337 | a.splice.apply(a, [index, 0].concat(nodes)); |
---|
338 | }else{ |
---|
339 | n = this.all.last().insertSibling(nodes, 'after', true); |
---|
340 | a.push.apply(a, nodes); |
---|
341 | } |
---|
342 | this.updateIndexes(index); |
---|
343 | }, |
---|
344 | |
---|
345 | // private |
---|
346 | onRemove : function(ds, record, index){ |
---|
347 | this.deselect(index); |
---|
348 | this.all.removeElement(index, true); |
---|
349 | this.updateIndexes(index); |
---|
350 | }, |
---|
351 | |
---|
352 | /** |
---|
353 | * Refreshes an individual node's data from the store. |
---|
354 | * @param {Number} index The item's data index in the store |
---|
355 | */ |
---|
356 | refreshNode : function(index){ |
---|
357 | this.onUpdate(this.store, this.store.getAt(index)); |
---|
358 | }, |
---|
359 | |
---|
360 | // private |
---|
361 | updateIndexes : function(startIndex, endIndex){ |
---|
362 | var ns = this.all.elements; |
---|
363 | startIndex = startIndex || 0; |
---|
364 | endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1)); |
---|
365 | for(var i = startIndex; i <= endIndex; i++){ |
---|
366 | ns[i].viewIndex = i; |
---|
367 | } |
---|
368 | }, |
---|
369 | |
---|
370 | /** |
---|
371 | * Returns the store associated with this DataView. |
---|
372 | * @return {Ext.data.Store} The store |
---|
373 | */ |
---|
374 | getStore : function(){ |
---|
375 | return this.store; |
---|
376 | }, |
---|
377 | |
---|
378 | /** |
---|
379 | * Changes the data store bound to this view and refreshes it. |
---|
380 | * @param {Store} store The store to bind to this view |
---|
381 | */ |
---|
382 | setStore : function(store, initial){ |
---|
383 | if(!initial && this.store){ |
---|
384 | this.store.un("beforeload", this.onBeforeLoad, this); |
---|
385 | this.store.un("datachanged", this.refresh, this); |
---|
386 | this.store.un("add", this.onAdd, this); |
---|
387 | this.store.un("remove", this.onRemove, this); |
---|
388 | this.store.un("update", this.onUpdate, this); |
---|
389 | this.store.un("clear", this.refresh, this); |
---|
390 | } |
---|
391 | if(store){ |
---|
392 | store = Ext.StoreMgr.lookup(store); |
---|
393 | store.on("beforeload", this.onBeforeLoad, this); |
---|
394 | store.on("datachanged", this.refresh, this); |
---|
395 | store.on("add", this.onAdd, this); |
---|
396 | store.on("remove", this.onRemove, this); |
---|
397 | store.on("update", this.onUpdate, this); |
---|
398 | store.on("clear", this.refresh, this); |
---|
399 | } |
---|
400 | this.store = store; |
---|
401 | if(store){ |
---|
402 | this.refresh(); |
---|
403 | } |
---|
404 | }, |
---|
405 | |
---|
406 | /** |
---|
407 | * Returns the template node the passed child belongs to, or null if it doesn't belong to one. |
---|
408 | * @param {HTMLElement} node |
---|
409 | * @return {HTMLElement} The template node |
---|
410 | */ |
---|
411 | findItemFromChild : function(node){ |
---|
412 | return Ext.fly(node).findParent(this.itemSelector, this.el); |
---|
413 | }, |
---|
414 | |
---|
415 | // private |
---|
416 | onClick : function(e){ |
---|
417 | var item = e.getTarget(this.itemSelector, this.el); |
---|
418 | if(item){ |
---|
419 | var index = this.indexOf(item); |
---|
420 | if(this.onItemClick(item, index, e) !== false){ |
---|
421 | this.fireEvent("click", this, index, item, e); |
---|
422 | } |
---|
423 | }else{ |
---|
424 | if(this.fireEvent("containerclick", this, e) !== false){ |
---|
425 | this.clearSelections(); |
---|
426 | } |
---|
427 | } |
---|
428 | }, |
---|
429 | |
---|
430 | // private |
---|
431 | onContextMenu : function(e){ |
---|
432 | var item = e.getTarget(this.itemSelector, this.el); |
---|
433 | if(item){ |
---|
434 | this.fireEvent("contextmenu", this, this.indexOf(item), item, e); |
---|
435 | } |
---|
436 | }, |
---|
437 | |
---|
438 | // private |
---|
439 | onDblClick : function(e){ |
---|
440 | var item = e.getTarget(this.itemSelector, this.el); |
---|
441 | if(item){ |
---|
442 | this.fireEvent("dblclick", this, this.indexOf(item), item, e); |
---|
443 | } |
---|
444 | }, |
---|
445 | |
---|
446 | // private |
---|
447 | onMouseOver : function(e){ |
---|
448 | var item = e.getTarget(this.itemSelector, this.el); |
---|
449 | if(item && item !== this.lastItem){ |
---|
450 | this.lastItem = item; |
---|
451 | Ext.fly(item).addClass(this.overClass); |
---|
452 | this.fireEvent("mouseenter", this, this.indexOf(item), item, e); |
---|
453 | } |
---|
454 | }, |
---|
455 | |
---|
456 | // private |
---|
457 | onMouseOut : function(e){ |
---|
458 | if(this.lastItem){ |
---|
459 | if(!e.within(this.lastItem, true, true)){ |
---|
460 | Ext.fly(this.lastItem).removeClass(this.overClass); |
---|
461 | this.fireEvent("mouseleave", this, this.indexOf(this.lastItem), this.lastItem, e); |
---|
462 | delete this.lastItem; |
---|
463 | } |
---|
464 | } |
---|
465 | }, |
---|
466 | |
---|
467 | // private |
---|
468 | onItemClick : function(item, index, e){ |
---|
469 | if(this.fireEvent("beforeclick", this, index, item, e) === false){ |
---|
470 | return false; |
---|
471 | } |
---|
472 | if(this.multiSelect){ |
---|
473 | this.doMultiSelection(item, index, e); |
---|
474 | e.preventDefault(); |
---|
475 | }else if(this.singleSelect){ |
---|
476 | this.doSingleSelection(item, index, e); |
---|
477 | e.preventDefault(); |
---|
478 | } |
---|
479 | return true; |
---|
480 | }, |
---|
481 | |
---|
482 | // private |
---|
483 | doSingleSelection : function(item, index, e){ |
---|
484 | if(e.ctrlKey && this.isSelected(index)){ |
---|
485 | this.deselect(index); |
---|
486 | }else{ |
---|
487 | this.select(index, false); |
---|
488 | } |
---|
489 | }, |
---|
490 | |
---|
491 | // private |
---|
492 | doMultiSelection : function(item, index, e){ |
---|
493 | if(e.shiftKey && this.last !== false){ |
---|
494 | var last = this.last; |
---|
495 | this.selectRange(last, index, e.ctrlKey); |
---|
496 | this.last = last; // reset the last |
---|
497 | }else{ |
---|
498 | if((e.ctrlKey||this.simpleSelect) && this.isSelected(index)){ |
---|
499 | this.deselect(index); |
---|
500 | }else{ |
---|
501 | this.select(index, e.ctrlKey || e.shiftKey || this.simpleSelect); |
---|
502 | } |
---|
503 | } |
---|
504 | }, |
---|
505 | |
---|
506 | /** |
---|
507 | * Gets the number of selected nodes. |
---|
508 | * @return {Number} The node count |
---|
509 | */ |
---|
510 | getSelectionCount : function(){ |
---|
511 | return this.selected.getCount() |
---|
512 | }, |
---|
513 | |
---|
514 | /** |
---|
515 | * Gets the currently selected nodes. |
---|
516 | * @return {Array} An array of HTMLElements |
---|
517 | */ |
---|
518 | getSelectedNodes : function(){ |
---|
519 | return this.selected.elements; |
---|
520 | }, |
---|
521 | |
---|
522 | /** |
---|
523 | * Gets the indexes of the selected nodes. |
---|
524 | * @return {Array} An array of numeric indexes |
---|
525 | */ |
---|
526 | getSelectedIndexes : function(){ |
---|
527 | var indexes = [], s = this.selected.elements; |
---|
528 | for(var i = 0, len = s.length; i < len; i++){ |
---|
529 | indexes.push(s[i].viewIndex); |
---|
530 | } |
---|
531 | return indexes; |
---|
532 | }, |
---|
533 | |
---|
534 | /** |
---|
535 | * Gets an array of the selected records |
---|
536 | * @return {Array} An array of {@link Ext.data.Record} objects |
---|
537 | */ |
---|
538 | getSelectedRecords : function(){ |
---|
539 | var r = [], s = this.selected.elements; |
---|
540 | for(var i = 0, len = s.length; i < len; i++){ |
---|
541 | r[r.length] = this.store.getAt(s[i].viewIndex); |
---|
542 | } |
---|
543 | return r; |
---|
544 | }, |
---|
545 | |
---|
546 | /** |
---|
547 | * Gets an array of the records from an array of nodes |
---|
548 | * @param {Array} nodes The nodes to evaluate |
---|
549 | * @return {Array} records The {@link Ext.data.Record} objects |
---|
550 | */ |
---|
551 | getRecords : function(nodes){ |
---|
552 | var r = [], s = nodes; |
---|
553 | for(var i = 0, len = s.length; i < len; i++){ |
---|
554 | r[r.length] = this.store.getAt(s[i].viewIndex); |
---|
555 | } |
---|
556 | return r; |
---|
557 | }, |
---|
558 | |
---|
559 | /** |
---|
560 | * Gets a record from a node |
---|
561 | * @param {HTMLElement} node The node to evaluate |
---|
562 | * @return {Record} record The {@link Ext.data.Record} object |
---|
563 | */ |
---|
564 | getRecord : function(node){ |
---|
565 | return this.store.getAt(node.viewIndex); |
---|
566 | }, |
---|
567 | |
---|
568 | /** |
---|
569 | * Clears all selections. |
---|
570 | * @param {Boolean} suppressEvent (optional) True to skip firing of the selectionchange event |
---|
571 | */ |
---|
572 | clearSelections : function(suppressEvent, skipUpdate){ |
---|
573 | if((this.multiSelect || this.singleSelect) && this.selected.getCount() > 0){ |
---|
574 | if(!skipUpdate){ |
---|
575 | this.selected.removeClass(this.selectedClass); |
---|
576 | } |
---|
577 | this.selected.clear(); |
---|
578 | this.last = false; |
---|
579 | if(!suppressEvent){ |
---|
580 | this.fireEvent("selectionchange", this, this.selected.elements); |
---|
581 | } |
---|
582 | } |
---|
583 | }, |
---|
584 | |
---|
585 | /** |
---|
586 | * Returns true if the passed node is selected, else false. |
---|
587 | * @param {HTMLElement/Number} node The node or node index to check |
---|
588 | * @return {Boolean} True if selected, else false |
---|
589 | */ |
---|
590 | isSelected : function(node){ |
---|
591 | return this.selected.contains(this.getNode(node)); |
---|
592 | }, |
---|
593 | |
---|
594 | /** |
---|
595 | * Deselects a node. |
---|
596 | * @param {HTMLElement/Number} node The node to deselect |
---|
597 | */ |
---|
598 | deselect : function(node){ |
---|
599 | if(this.isSelected(node)){ |
---|
600 | node = this.getNode(node); |
---|
601 | this.selected.removeElement(node); |
---|
602 | if(this.last == node.viewIndex){ |
---|
603 | this.last = false; |
---|
604 | } |
---|
605 | Ext.fly(node).removeClass(this.selectedClass); |
---|
606 | this.fireEvent("selectionchange", this, this.selected.elements); |
---|
607 | } |
---|
608 | }, |
---|
609 | |
---|
610 | /** |
---|
611 | * Selects a set of nodes. |
---|
612 | * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, |
---|
613 | * id of a template node or an array of any of those to select |
---|
614 | * @param {Boolean} keepExisting (optional) true to keep existing selections |
---|
615 | * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent |
---|
616 | */ |
---|
617 | select : function(nodeInfo, keepExisting, suppressEvent){ |
---|
618 | if(Ext.isArray(nodeInfo)){ |
---|
619 | if(!keepExisting){ |
---|
620 | this.clearSelections(true); |
---|
621 | } |
---|
622 | for(var i = 0, len = nodeInfo.length; i < len; i++){ |
---|
623 | this.select(nodeInfo[i], true, true); |
---|
624 | } |
---|
625 | if(!suppressEvent){ |
---|
626 | this.fireEvent("selectionchange", this, this.selected.elements); |
---|
627 | } |
---|
628 | } else{ |
---|
629 | var node = this.getNode(nodeInfo); |
---|
630 | if(!keepExisting){ |
---|
631 | this.clearSelections(true); |
---|
632 | } |
---|
633 | if(node && !this.isSelected(node)){ |
---|
634 | if(this.fireEvent("beforeselect", this, node, this.selected.elements) !== false){ |
---|
635 | Ext.fly(node).addClass(this.selectedClass); |
---|
636 | this.selected.add(node); |
---|
637 | this.last = node.viewIndex; |
---|
638 | if(!suppressEvent){ |
---|
639 | this.fireEvent("selectionchange", this, this.selected.elements); |
---|
640 | } |
---|
641 | } |
---|
642 | } |
---|
643 | } |
---|
644 | }, |
---|
645 | |
---|
646 | /** |
---|
647 | * Selects a range of nodes. All nodes between start and end are selected. |
---|
648 | * @param {Number} start The index of the first node in the range |
---|
649 | * @param {Number} end The index of the last node in the range |
---|
650 | * @param {Boolean} keepExisting (optional) True to retain existing selections |
---|
651 | */ |
---|
652 | selectRange : function(start, end, keepExisting){ |
---|
653 | if(!keepExisting){ |
---|
654 | this.clearSelections(true); |
---|
655 | } |
---|
656 | this.select(this.getNodes(start, end), true); |
---|
657 | }, |
---|
658 | |
---|
659 | /** |
---|
660 | * Gets a template node. |
---|
661 | * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node |
---|
662 | * @return {HTMLElement} The node or null if it wasn't found |
---|
663 | */ |
---|
664 | getNode : function(nodeInfo){ |
---|
665 | if(typeof nodeInfo == "string"){ |
---|
666 | return document.getElementById(nodeInfo); |
---|
667 | }else if(typeof nodeInfo == "number"){ |
---|
668 | return this.all.elements[nodeInfo]; |
---|
669 | } |
---|
670 | return nodeInfo; |
---|
671 | }, |
---|
672 | |
---|
673 | /** |
---|
674 | * Gets a range nodes. |
---|
675 | * @param {Number} start (optional) The index of the first node in the range |
---|
676 | * @param {Number} end (optional) The index of the last node in the range |
---|
677 | * @return {Array} An array of nodes |
---|
678 | */ |
---|
679 | getNodes : function(start, end){ |
---|
680 | var ns = this.all.elements; |
---|
681 | start = start || 0; |
---|
682 | end = typeof end == "undefined" ? Math.max(ns.length - 1, 0) : end; |
---|
683 | var nodes = [], i; |
---|
684 | if(start <= end){ |
---|
685 | for(i = start; i <= end && ns[i]; i++){ |
---|
686 | nodes.push(ns[i]); |
---|
687 | } |
---|
688 | } else{ |
---|
689 | for(i = start; i >= end && ns[i]; i--){ |
---|
690 | nodes.push(ns[i]); |
---|
691 | } |
---|
692 | } |
---|
693 | return nodes; |
---|
694 | }, |
---|
695 | |
---|
696 | /** |
---|
697 | * Finds the index of the passed node. |
---|
698 | * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node |
---|
699 | * @return {Number} The index of the node or -1 |
---|
700 | */ |
---|
701 | indexOf : function(node){ |
---|
702 | node = this.getNode(node); |
---|
703 | if(typeof node.viewIndex == "number"){ |
---|
704 | return node.viewIndex; |
---|
705 | } |
---|
706 | return this.all.indexOf(node); |
---|
707 | }, |
---|
708 | |
---|
709 | // private |
---|
710 | onBeforeLoad : function(){ |
---|
711 | if(this.loadingText){ |
---|
712 | this.clearSelections(false, true); |
---|
713 | this.el.update('<div class="loading-indicator">'+this.loadingText+'</div>'); |
---|
714 | this.all.clear(); |
---|
715 | } |
---|
716 | }, |
---|
717 | |
---|
718 | onDestroy : function(){ |
---|
719 | Ext.DataView.superclass.onDestroy.call(this); |
---|
720 | this.setStore(null); |
---|
721 | } |
---|
722 | }); |
---|
723 | |
---|
724 | Ext.reg('dataview', Ext.DataView); |
---|