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 template : '<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){
52 if (typeof(depreciated_tpl) == 'undefined') {
53 config = depreciated_container;
54 depreciated_tpl = = config.template;
56 this.el = Roo.get(config);
57 this.template = depreciated_tpl;
61 if(typeof(this.template) == "string"){
62 this.tpl = new Roo.Template(this.template);
64 this.tpl = this.template;
68 * The template used by this View
69 * @type {Roo.DomHelper.Template}
73 Roo.apply(this, config);
79 * Fires before a click is processed. Returns false to cancel the default action.
80 * @param {Roo.View} this
81 * @param {Number} index The index of the target node
82 * @param {HTMLElement} node The target node
83 * @param {Roo.EventObject} e The raw event object
88 * Fires when a template node is clicked.
89 * @param {Roo.View} this
90 * @param {Number} index The index of the target node
91 * @param {HTMLElement} node The target node
92 * @param {Roo.EventObject} e The raw event object
97 * Fires when a template node is double clicked.
98 * @param {Roo.View} this
99 * @param {Number} index The index of the target node
100 * @param {HTMLElement} node The target node
101 * @param {Roo.EventObject} e The raw event object
106 * Fires when a template node is right clicked.
107 * @param {Roo.View} this
108 * @param {Number} index The index of the target node
109 * @param {HTMLElement} node The target node
110 * @param {Roo.EventObject} e The raw event object
112 "contextmenu" : true,
114 * @event selectionchange
115 * Fires when the selected nodes change.
116 * @param {Roo.View} this
117 * @param {Array} selections Array of the selected nodes
119 "selectionchange" : true,
122 * @event beforeselect
123 * Fires before a selection is made. If any handlers return false, the selection is cancelled.
124 * @param {Roo.View} this
125 * @param {HTMLElement} node The node to be selected
126 * @param {Array} selections Array of currently selected nodes
128 "beforeselect" : true
132 "click": this.onClick,
133 "dblclick": this.onDblClick,
134 "contextmenu": this.onContextMenu,
138 this.selections = [];
140 this.cmp = new Roo.CompositeElementLite([]);
142 this.store = Roo.factory(this.store, Roo.data);
143 this.setStore(this.store, true);
145 Roo.View.superclass.constructor.call(this);
148 Roo.extend(Roo.View, Roo.util.Observable, {
151 * The container element.
152 * @cfg {String|Roo.Element}
156 * The template used by this View
157 * @cfg {String|Roo.DomHelper.Template}
162 * The template used by this View (after contruction)
163 * @type {Roo.DomHelper.Template}
168 * The css class to add to selected nodes
169 * @type {Roo.DomHelper.Template}
171 selectedClass : "x-view-selected",
175 * Returns the element this view is bound to.
176 * @return {Roo.Element}
183 * Refreshes the view.
185 refresh : function(){
187 this.clearSelections();
190 var records = this.store.getRange();
191 if(records.length < 1){
192 this.el.update(this.emptyText);
195 for(var i = 0, len = records.length; i < len; i++){
196 var data = this.prepareData(records[i].data, i, records[i]);
197 html[html.length] = t.apply(data);
199 this.el.update(html.join(""));
200 this.nodes = this.el.dom.childNodes;
201 this.updateIndexes(0);
205 * Function to override to reformat the data that is sent to
206 * the template for each node.
207 * @param {Array/Object} data The raw data (array of colData for a data model bound view or
208 * a JSON object for an UpdateManager bound view).
210 prepareData : function(data){
214 onUpdate : function(ds, record){
215 this.clearSelections();
216 var index = this.store.indexOf(record);
217 var n = this.nodes[index];
218 this.tpl.insertBefore(n, this.prepareData(record.data));
219 n.parentNode.removeChild(n);
220 this.updateIndexes(index, index);
223 onAdd : function(ds, records, index){
224 this.clearSelections();
225 if(this.nodes.length == 0){
229 var n = this.nodes[index];
230 for(var i = 0, len = records.length; i < len; i++){
231 var d = this.prepareData(records[i].data);
233 this.tpl.insertBefore(n, d);
235 this.tpl.append(this.el, d);
238 this.updateIndexes(index);
241 onRemove : function(ds, record, index){
242 this.clearSelections();
243 this.el.dom.removeChild(this.nodes[index]);
244 this.updateIndexes(index);
248 * Refresh an individual node.
249 * @param {Number} index
251 refreshNode : function(index){
252 this.onUpdate(this.store, this.store.getAt(index));
255 updateIndexes : function(startIndex, endIndex){
257 startIndex = startIndex || 0;
258 endIndex = endIndex || ns.length - 1;
259 for(var i = startIndex; i <= endIndex; i++){
265 * Changes the data store this view uses and refresh the view.
266 * @param {Store} store
268 setStore : function(store, initial){
269 if(!initial && this.store){
270 this.store.un("datachanged", this.refresh);
271 this.store.un("add", this.onAdd);
272 this.store.un("remove", this.onRemove);
273 this.store.un("update", this.onUpdate);
274 this.store.un("clear", this.refresh);
278 store.on("datachanged", this.refresh, this);
279 store.on("add", this.onAdd, this);
280 store.on("remove", this.onRemove, this);
281 store.on("update", this.onUpdate, this);
282 store.on("clear", this.refresh, this);
291 * Returns the template node the passed child belongs to or null if it doesn't belong to one.
292 * @param {HTMLElement} node
293 * @return {HTMLElement} The template node
295 findItemFromChild : function(node){
296 var el = this.el.dom;
297 if(!node || node.parentNode == el){
300 var p = node.parentNode;
302 if(p.parentNode == el){
311 onClick : function(e){
312 var item = this.findItemFromChild(e.getTarget());
314 var index = this.indexOf(item);
315 if(this.onItemClick(item, index, e) !== false){
316 this.fireEvent("click", this, index, item, e);
319 this.clearSelections();
324 onContextMenu : function(e){
325 var item = this.findItemFromChild(e.getTarget());
327 this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
332 onDblClick : function(e){
333 var item = this.findItemFromChild(e.getTarget());
335 this.fireEvent("dblclick", this, this.indexOf(item), item, e);
339 onItemClick : function(item, index, e){
340 if(this.fireEvent("beforeclick", this, index, item, e) === false){
343 if(this.multiSelect || this.singleSelect){
344 if(this.multiSelect && e.shiftKey && this.lastSelection){
345 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
347 this.select(item, this.multiSelect && e.ctrlKey);
348 this.lastSelection = item;
356 * Get the number of selected nodes.
359 getSelectionCount : function(){
360 return this.selections.length;
364 * Get the currently selected nodes.
365 * @return {Array} An array of HTMLElements
367 getSelectedNodes : function(){
368 return this.selections;
372 * Get the indexes of the selected nodes.
375 getSelectedIndexes : function(){
376 var indexes = [], s = this.selections;
377 for(var i = 0, len = s.length; i < len; i++){
378 indexes.push(s[i].nodeIndex);
384 * Clear all selections
385 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
387 clearSelections : function(suppressEvent){
388 if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
389 this.cmp.elements = this.selections;
390 this.cmp.removeClass(this.selectedClass);
391 this.selections = [];
393 this.fireEvent("selectionchange", this, this.selections);
399 * Returns true if the passed node is selected
400 * @param {HTMLElement/Number} node The node or node index
403 isSelected : function(node){
404 var s = this.selections;
408 node = this.getNode(node);
409 return s.indexOf(node) !== -1;
414 * @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
415 * @param {Boolean} keepExisting (optional) true to keep existing selections
416 * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
418 select : function(nodeInfo, keepExisting, suppressEvent){
419 if(nodeInfo instanceof Array){
421 this.clearSelections(true);
423 for(var i = 0, len = nodeInfo.length; i < len; i++){
424 this.select(nodeInfo[i], true, true);
427 var node = this.getNode(nodeInfo);
428 if(node && !this.isSelected(node)){
430 this.clearSelections(true);
432 if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
433 Roo.fly(node).addClass(this.selectedClass);
434 this.selections.push(node);
436 this.fireEvent("selectionchange", this, this.selections);
444 * Gets a template node.
445 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
446 * @return {HTMLElement} The node or null if it wasn't found
448 getNode : function(nodeInfo){
449 if(typeof nodeInfo == "string"){
450 return document.getElementById(nodeInfo);
451 }else if(typeof nodeInfo == "number"){
452 return this.nodes[nodeInfo];
458 * Gets a range template nodes.
459 * @param {Number} startIndex
460 * @param {Number} endIndex
461 * @return {Array} An array of nodes
463 getNodes : function(start, end){
466 end = typeof end == "undefined" ? ns.length - 1 : end;
469 for(var i = start; i <= end; i++){
473 for(var i = start; i >= end; i--){
481 * Finds the index of the passed node
482 * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
483 * @return {Number} The index of the node or -1
485 indexOf : function(node){
486 node = this.getNode(node);
487 if(typeof node.nodeIndex == "number"){
488 return node.nodeIndex;
491 for(var i = 0, len = ns.length; i < len; i++){