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("my-element",
22 '<div id="{0}">{2} - {1}</div>', // auto create template
25 selectedClass: "ydataview-selected",
29 // listen for node click?
30 view.on("click", function(vw, index, node, e){
31 alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
35 dataModel.load("foobar.xml");
37 For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
39 * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
40 * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
43 * @param {String/HTMLElement/Element} container The container element where the view is to be rendered.
44 * @param {String/DomHelper.Template} tpl The rendering template or a string to create a template with
45 * @param {Object} config The config object
47 Roo.View = function(container, tpl, config){
49 if (typeof(tpl) == 'undefined') {
51 container = config.container;
52 tpl = = config.template;
55 this.container = container;
58 this.el = Roo.get(container);
59 if(typeof tpl == "string"){
60 tpl = new Roo.Template(tpl);
64 * The template used by this View
65 * @type {Roo.DomHelper.Template}
69 Roo.apply(this, config);
75 * Fires before a click is processed. Returns false to cancel the default action.
76 * @param {Roo.View} this
77 * @param {Number} index The index of the target node
78 * @param {HTMLElement} node The target node
79 * @param {Roo.EventObject} e The raw event object
84 * Fires when a template node is clicked.
85 * @param {Roo.View} this
86 * @param {Number} index The index of the target node
87 * @param {HTMLElement} node The target node
88 * @param {Roo.EventObject} e The raw event object
93 * Fires when a template node is double clicked.
94 * @param {Roo.View} this
95 * @param {Number} index The index of the target node
96 * @param {HTMLElement} node The target node
97 * @param {Roo.EventObject} e The raw event object
102 * Fires when a template node is right clicked.
103 * @param {Roo.View} this
104 * @param {Number} index The index of the target node
105 * @param {HTMLElement} node The target node
106 * @param {Roo.EventObject} e The raw event object
108 "contextmenu" : true,
110 * @event selectionchange
111 * Fires when the selected nodes change.
112 * @param {Roo.View} this
113 * @param {Array} selections Array of the selected nodes
115 "selectionchange" : true,
118 * @event beforeselect
119 * Fires before a selection is made. If any handlers return false, the selection is cancelled.
120 * @param {Roo.View} this
121 * @param {HTMLElement} node The node to be selected
122 * @param {Array} selections Array of currently selected nodes
124 "beforeselect" : true
128 "click": this.onClick,
129 "dblclick": this.onDblClick,
130 "contextmenu": this.onContextMenu,
134 this.selections = [];
136 this.cmp = new Roo.CompositeElementLite([]);
138 this.store = Roo.factory(this.store, Roo.data);
139 this.setStore(this.store, true);
141 Roo.View.superclass.constructor.call(this);
144 Roo.extend(Roo.View, Roo.util.Observable, {
147 * The container element.
148 * @cfg {String|Roo.Element}
152 * The template used by this View
153 * @cfg {String|Roo.DomHelper.Template}
157 * The css class to add to selected nodes
158 * @type {Roo.DomHelper.Template}
160 selectedClass : "x-view-selected",
164 * Returns the element this view is bound to.
165 * @return {Roo.Element}
172 * Refreshes the view.
174 refresh : function(){
176 this.clearSelections();
179 var records = this.store.getRange();
180 if(records.length < 1){
181 this.el.update(this.emptyText);
184 for(var i = 0, len = records.length; i < len; i++){
185 var data = this.prepareData(records[i].data, i, records[i]);
186 html[html.length] = t.apply(data);
188 this.el.update(html.join(""));
189 this.nodes = this.el.dom.childNodes;
190 this.updateIndexes(0);
194 * Function to override to reformat the data that is sent to
195 * the template for each node.
196 * @param {Array/Object} data The raw data (array of colData for a data model bound view or
197 * a JSON object for an UpdateManager bound view).
199 prepareData : function(data){
203 onUpdate : function(ds, record){
204 this.clearSelections();
205 var index = this.store.indexOf(record);
206 var n = this.nodes[index];
207 this.tpl.insertBefore(n, this.prepareData(record.data));
208 n.parentNode.removeChild(n);
209 this.updateIndexes(index, index);
212 onAdd : function(ds, records, index){
213 this.clearSelections();
214 if(this.nodes.length == 0){
218 var n = this.nodes[index];
219 for(var i = 0, len = records.length; i < len; i++){
220 var d = this.prepareData(records[i].data);
222 this.tpl.insertBefore(n, d);
224 this.tpl.append(this.el, d);
227 this.updateIndexes(index);
230 onRemove : function(ds, record, index){
231 this.clearSelections();
232 this.el.dom.removeChild(this.nodes[index]);
233 this.updateIndexes(index);
237 * Refresh an individual node.
238 * @param {Number} index
240 refreshNode : function(index){
241 this.onUpdate(this.store, this.store.getAt(index));
244 updateIndexes : function(startIndex, endIndex){
246 startIndex = startIndex || 0;
247 endIndex = endIndex || ns.length - 1;
248 for(var i = startIndex; i <= endIndex; i++){
254 * Changes the data store this view uses and refresh the view.
255 * @param {Store} store
257 setStore : function(store, initial){
258 if(!initial && this.store){
259 this.store.un("datachanged", this.refresh);
260 this.store.un("add", this.onAdd);
261 this.store.un("remove", this.onRemove);
262 this.store.un("update", this.onUpdate);
263 this.store.un("clear", this.refresh);
267 store.on("datachanged", this.refresh, this);
268 store.on("add", this.onAdd, this);
269 store.on("remove", this.onRemove, this);
270 store.on("update", this.onUpdate, this);
271 store.on("clear", this.refresh, this);
280 * Returns the template node the passed child belongs to or null if it doesn't belong to one.
281 * @param {HTMLElement} node
282 * @return {HTMLElement} The template node
284 findItemFromChild : function(node){
285 var el = this.el.dom;
286 if(!node || node.parentNode == el){
289 var p = node.parentNode;
291 if(p.parentNode == el){
300 onClick : function(e){
301 var item = this.findItemFromChild(e.getTarget());
303 var index = this.indexOf(item);
304 if(this.onItemClick(item, index, e) !== false){
305 this.fireEvent("click", this, index, item, e);
308 this.clearSelections();
313 onContextMenu : function(e){
314 var item = this.findItemFromChild(e.getTarget());
316 this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
321 onDblClick : function(e){
322 var item = this.findItemFromChild(e.getTarget());
324 this.fireEvent("dblclick", this, this.indexOf(item), item, e);
328 onItemClick : function(item, index, e){
329 if(this.fireEvent("beforeclick", this, index, item, e) === false){
332 if(this.multiSelect || this.singleSelect){
333 if(this.multiSelect && e.shiftKey && this.lastSelection){
334 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
336 this.select(item, this.multiSelect && e.ctrlKey);
337 this.lastSelection = item;
345 * Get the number of selected nodes.
348 getSelectionCount : function(){
349 return this.selections.length;
353 * Get the currently selected nodes.
354 * @return {Array} An array of HTMLElements
356 getSelectedNodes : function(){
357 return this.selections;
361 * Get the indexes of the selected nodes.
364 getSelectedIndexes : function(){
365 var indexes = [], s = this.selections;
366 for(var i = 0, len = s.length; i < len; i++){
367 indexes.push(s[i].nodeIndex);
373 * Clear all selections
374 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
376 clearSelections : function(suppressEvent){
377 if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
378 this.cmp.elements = this.selections;
379 this.cmp.removeClass(this.selectedClass);
380 this.selections = [];
382 this.fireEvent("selectionchange", this, this.selections);
388 * Returns true if the passed node is selected
389 * @param {HTMLElement/Number} node The node or node index
392 isSelected : function(node){
393 var s = this.selections;
397 node = this.getNode(node);
398 return s.indexOf(node) !== -1;
403 * @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
404 * @param {Boolean} keepExisting (optional) true to keep existing selections
405 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
407 select : function(nodeInfo, keepExisting, suppressEvent){
408 if(nodeInfo instanceof Array){
410 this.clearSelections(true);
412 for(var i = 0, len = nodeInfo.length; i < len; i++){
413 this.select(nodeInfo[i], true, true);
416 var node = this.getNode(nodeInfo);
417 if(node && !this.isSelected(node)){
419 this.clearSelections(true);
421 if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
422 Roo.fly(node).addClass(this.selectedClass);
423 this.selections.push(node);
425 this.fireEvent("selectionchange", this, this.selections);
433 * Gets a template node.
434 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
435 * @return {HTMLElement} The node or null if it wasn't found
437 getNode : function(nodeInfo){
438 if(typeof nodeInfo == "string"){
439 return document.getElementById(nodeInfo);
440 }else if(typeof nodeInfo == "number"){
441 return this.nodes[nodeInfo];
447 * Gets a range template nodes.
448 * @param {Number} startIndex
449 * @param {Number} endIndex
450 * @return {Array} An array of nodes
452 getNodes : function(start, end){
455 end = typeof end == "undefined" ? ns.length - 1 : end;
458 for(var i = start; i <= end; i++){
462 for(var i = start; i >= end; i--){
470 * Finds the index of the passed node
471 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
472 * @return {Number} The index of the node or -1
474 indexOf : function(node){
475 node = this.getNode(node);
476 if(typeof node.nodeIndex == "number"){
477 return node.nodeIndex;
480 for(var i = 0, len = ns.length; i < len; i++){