4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @extends Roo.util.Observable
15 * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template.
16 * This class also supports single and multi selection modes. <br>
17 * Create a data model bound view:
19 var store = new Roo.data.Store(...);
21 var view = new Roo.View({
23 tpl : '<div id="{0}">{2} - {1}</div>', // auto create template
26 selectedClass: "ydataview-selected",
30 // listen for node click?
31 view.on("click", function(vw, index, node, e){
32 alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
36 dataModel.load("foobar.xml");
38 For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
40 * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
41 * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
43 * Note: old style constructor is still suported (container, template, config)
47 * @param {Object} config The config object
50 Roo.View = function(config, depreciated_tpl, depreciated_config){
54 if (typeof(depreciated_tpl) == 'undefined') {
55 // new way.. - universal constructor.
56 Roo.apply(this, config);
57 this.el = Roo.get(this.el);
60 this.el = Roo.get(config);
61 this.tpl = depreciated_tpl;
62 Roo.apply(this, depreciated_config);
64 this.wrapEl = this.el.wrap().wrap();
65 ///this.el = this.wrapEla.appendChild(document.createElement("div"));
68 if(typeof(this.tpl) == "string"){
69 this.tpl = new Roo.Template(this.tpl);
71 // support xtype ctors..
72 this.tpl = new Roo.factory(this.tpl, Roo);
82 * Fires before a click is processed. Returns false to cancel the default action.
83 * @param {Roo.View} this
84 * @param {Number} index The index of the target node
85 * @param {HTMLElement} node The target node
86 * @param {Roo.EventObject} e The raw event object
91 * Fires when a template node is clicked.
92 * @param {Roo.View} this
93 * @param {Number} index The index of the target node
94 * @param {HTMLElement} node The target node
95 * @param {Roo.EventObject} e The raw event object
100 * Fires when a template node is double clicked.
101 * @param {Roo.View} this
102 * @param {Number} index The index of the target node
103 * @param {HTMLElement} node The target node
104 * @param {Roo.EventObject} e The raw event object
109 * Fires when a template node is right clicked.
110 * @param {Roo.View} this
111 * @param {Number} index The index of the target node
112 * @param {HTMLElement} node The target node
113 * @param {Roo.EventObject} e The raw event object
115 "contextmenu" : true,
117 * @event selectionchange
118 * Fires when the selected nodes change.
119 * @param {Roo.View} this
120 * @param {Array} selections Array of the selected nodes
122 "selectionchange" : true,
125 * @event beforeselect
126 * Fires before a selection is made. If any handlers return false, the selection is cancelled.
127 * @param {Roo.View} this
128 * @param {HTMLElement} node The node to be selected
129 * @param {Array} selections Array of currently selected nodes
131 "beforeselect" : true,
134 * Fires on every row to render, to allow you to change the data.
135 * @param {Roo.View} this
136 * @param {Object} data to be rendered (change this)
146 "click": this.onClick,
147 "dblclick": this.onDblClick,
148 "contextmenu": this.onContextMenu,
152 this.selections = [];
154 this.cmp = new Roo.CompositeElementLite([]);
156 this.store = Roo.factory(this.store, Roo.data);
157 this.setStore(this.store, true);
160 if ( this.footer && this.footer.xtype) {
162 var fctr = this.wrapEl.appendChild(document.createElement("div"));
164 this.footer.dataSource = this.store;
165 this.footer.container = fctr;
166 this.footer = Roo.factory(this.footer, Roo);
167 fctr.insertFirst(this.el);
169 // this is a bit insane - as the paging toolbar seems to detach the el..
170 // dom.parentNode.parentNode.parentNode
171 // they get detached?
175 Roo.View.superclass.constructor.call(this);
180 Roo.extend(Roo.View, Roo.util.Observable, {
183 * @cfg {Roo.data.Store} store Data store to load data from.
188 * @cfg {String|Roo.Element} el The container element.
193 * @cfg {String|Roo.Template} tpl The template used by this View
197 * @cfg {String} dataName the named area of the template to use as the data area
198 * Works with domtemplates roo-name="name"
202 * @cfg {String} selectedClass The css class to add to selected nodes
204 selectedClass : "x-view-selected",
206 * @cfg {String} emptyText The empty text to show when nothing is loaded.
211 * @cfg {String} text to display on mask (default Loading)
215 * @cfg {Boolean} multiSelect Allow multiple selection
219 * @cfg {Boolean} singleSelect Allow single selection
224 * @cfg {Boolean} toggleSelect - selecting
226 toggleSelect : false,
229 * @cfg {Boolean} tickable - selecting
234 * Returns the element this view is bound to.
235 * @return {Roo.Element}
244 * Refreshes the view. - called by datachanged on the store. - do not call directly.
246 refresh : function(){
247 //Roo.log('refresh');
250 // if we are using something like 'domtemplate', then
251 // the what gets used is:
252 // t.applySubtemplate(NAME, data, wrapping data..)
253 // the outer template then get' applied with
254 // the store 'extra data'
255 // and the body get's added to the
256 // roo-name="data" node?
257 // <span class='roo-tpl-{name}'></span> ?????
261 this.clearSelections();
264 var records = this.store.getRange();
265 if(records.length < 1) {
267 // is this valid?? = should it render a template??
269 this.el.update(this.emptyText);
274 this.el.update(t.apply(this.store.meta)); //????
275 el = this.el.child('.roo-tpl-' + this.dataName);
278 for(var i = 0, len = records.length; i < len; i++){
279 var data = this.prepareData(records[i].data, i, records[i]);
280 this.fireEvent("preparedata", this, data, i, records[i]);
282 var d = Roo.apply({}, data);
285 Roo.apply(d, {'roo-id' : Roo.id()});
289 Roo.each(this.parent.item, function(item){
290 if(item[_this.parent.valueField] != data[_this.parent.valueField]){
293 Roo.apply(d, {'roo-data-checked' : 'checked'});
297 html[html.length] = Roo.util.Format.trim(
299 t.applySubtemplate(this.dataName, d, this.store.meta) :
306 el.update(html.join(""));
307 this.nodes = el.dom.childNodes;
308 this.updateIndexes(0);
313 * Function to override to reformat the data that is sent to
314 * the template for each node.
315 * DEPRICATED - use the preparedata event handler.
316 * @param {Array/Object} data The raw data (array of colData for a data model bound view or
317 * a JSON object for an UpdateManager bound view).
319 prepareData : function(data, index, record)
321 this.fireEvent("preparedata", this, data, index, record);
325 onUpdate : function(ds, record){
326 // Roo.log('on update');
327 this.clearSelections();
328 var index = this.store.indexOf(record);
329 var n = this.nodes[index];
330 this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
331 n.parentNode.removeChild(n);
332 this.updateIndexes(index, index);
338 onAdd : function(ds, records, index)
340 //Roo.log(['on Add', ds, records, index] );
341 this.clearSelections();
342 if(this.nodes.length == 0){
346 var n = this.nodes[index];
347 for(var i = 0, len = records.length; i < len; i++){
348 var d = this.prepareData(records[i].data, i, records[i]);
350 this.tpl.insertBefore(n, d);
353 this.tpl.append(this.el, d);
356 this.updateIndexes(index);
359 onRemove : function(ds, record, index){
360 // Roo.log('onRemove');
361 this.clearSelections();
362 var el = this.dataName ?
363 this.el.child('.roo-tpl-' + this.dataName) :
366 el.dom.removeChild(this.nodes[index]);
367 this.updateIndexes(index);
371 * Refresh an individual node.
372 * @param {Number} index
374 refreshNode : function(index){
375 this.onUpdate(this.store, this.store.getAt(index));
378 updateIndexes : function(startIndex, endIndex){
380 startIndex = startIndex || 0;
381 endIndex = endIndex || ns.length - 1;
382 for(var i = startIndex; i <= endIndex; i++){
388 * Changes the data store this view uses and refresh the view.
389 * @param {Store} store
391 setStore : function(store, initial){
392 if(!initial && this.store){
393 this.store.un("datachanged", this.refresh);
394 this.store.un("add", this.onAdd);
395 this.store.un("remove", this.onRemove);
396 this.store.un("update", this.onUpdate);
397 this.store.un("clear", this.refresh);
398 this.store.un("beforeload", this.onBeforeLoad);
399 this.store.un("load", this.onLoad);
400 this.store.un("loadexception", this.onLoad);
404 store.on("datachanged", this.refresh, this);
405 store.on("add", this.onAdd, this);
406 store.on("remove", this.onRemove, this);
407 store.on("update", this.onUpdate, this);
408 store.on("clear", this.refresh, this);
409 store.on("beforeload", this.onBeforeLoad, this);
410 store.on("load", this.onLoad, this);
411 store.on("loadexception", this.onLoad, this);
419 * onbeforeLoad - masks the loading area.
422 onBeforeLoad : function(store,opts)
424 //Roo.log('onBeforeLoad');
428 this.el.mask(this.mask ? this.mask : "Loading" );
437 * Returns the template node the passed child belongs to or null if it doesn't belong to one.
438 * @param {HTMLElement} node
439 * @return {HTMLElement} The template node
441 findItemFromChild : function(node){
442 var el = this.dataName ?
443 this.el.child('.roo-tpl-' + this.dataName,true) :
446 if(!node || node.parentNode == el){
449 var p = node.parentNode;
451 if(p.parentNode == el){
460 onClick : function(e){
461 var item = this.findItemFromChild(e.getTarget());
463 var index = this.indexOf(item);
464 if(this.onItemClick(item, index, e) !== false){
465 this.fireEvent("click", this, index, item, e);
468 this.clearSelections();
473 onContextMenu : function(e){
474 var item = this.findItemFromChild(e.getTarget());
476 this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
481 onDblClick : function(e){
482 var item = this.findItemFromChild(e.getTarget());
484 this.fireEvent("dblclick", this, this.indexOf(item), item, e);
488 onItemClick : function(item, index, e)
490 if(this.fireEvent("beforeclick", this, index, item, e) === false){
493 if (this.toggleSelect) {
494 var m = this.isSelected(item) ? 'unselect' : 'select';
497 _t[m](item, true, false);
500 if(this.multiSelect || this.singleSelect){
501 if(this.multiSelect && e.shiftKey && this.lastSelection){
502 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
504 this.select(item, this.multiSelect && e.ctrlKey);
505 this.lastSelection = item;
517 * Get the number of selected nodes.
520 getSelectionCount : function(){
521 return this.selections.length;
525 * Get the currently selected nodes.
526 * @return {Array} An array of HTMLElements
528 getSelectedNodes : function(){
529 return this.selections;
533 * Get the indexes of the selected nodes.
536 getSelectedIndexes : function(){
537 var indexes = [], s = this.selections;
538 for(var i = 0, len = s.length; i < len; i++){
539 indexes.push(s[i].nodeIndex);
545 * Clear all selections
546 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
548 clearSelections : function(suppressEvent){
549 if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
550 this.cmp.elements = this.selections;
551 this.cmp.removeClass(this.selectedClass);
552 this.selections = [];
554 this.fireEvent("selectionchange", this, this.selections);
560 * Returns true if the passed node is selected
561 * @param {HTMLElement/Number} node The node or node index
564 isSelected : function(node){
565 var s = this.selections;
569 node = this.getNode(node);
570 return s.indexOf(node) !== -1;
575 * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
576 * @param {Boolean} keepExisting (optional) true to keep existing selections
577 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
579 select : function(nodeInfo, keepExisting, suppressEvent){
580 if(nodeInfo instanceof Array){
582 this.clearSelections(true);
584 for(var i = 0, len = nodeInfo.length; i < len; i++){
585 this.select(nodeInfo[i], true, true);
589 var node = this.getNode(nodeInfo);
590 if(!node || this.isSelected(node)){
591 return; // already selected.
594 this.clearSelections(true);
597 if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
598 Roo.fly(node).addClass(this.selectedClass);
599 this.selections.push(node);
601 this.fireEvent("selectionchange", this, this.selections);
609 * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
610 * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
611 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
613 unselect : function(nodeInfo, keepExisting, suppressEvent)
615 if(nodeInfo instanceof Array){
616 Roo.each(this.selections, function(s) {
617 this.unselect(s, nodeInfo);
621 var node = this.getNode(nodeInfo);
622 if(!node || !this.isSelected(node)){
623 //Roo.log("not selected");
624 return; // not selected.
628 Roo.each(this.selections, function(s) {
630 Roo.fly(node).removeClass(this.selectedClass);
638 this.fireEvent("selectionchange", this, this.selections);
642 * Gets a template node.
643 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
644 * @return {HTMLElement} The node or null if it wasn't found
646 getNode : function(nodeInfo){
647 if(typeof nodeInfo == "string"){
648 return document.getElementById(nodeInfo);
649 }else if(typeof nodeInfo == "number"){
650 return this.nodes[nodeInfo];
656 * Gets a range template nodes.
657 * @param {Number} startIndex
658 * @param {Number} endIndex
659 * @return {Array} An array of nodes
661 getNodes : function(start, end){
664 end = typeof end == "undefined" ? ns.length - 1 : end;
667 for(var i = start; i <= end; i++){
671 for(var i = start; i >= end; i--){
679 * Finds the index of the passed node
680 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
681 * @return {Number} The index of the node or -1
683 indexOf : function(node){
684 node = this.getNode(node);
685 if(typeof node.nodeIndex == "number"){
686 return node.nodeIndex;
689 for(var i = 0, len = ns.length; i < len; i++){