/*
 * Ext JS Library 2.3.0
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/** * @class Ext.DataView * @extends Ext.BoxComponent * A mechanism for displaying data using custom layout templates and formatting. DataView uses an {@link Ext.XTemplate} * as its internal templating mechanism, and is bound to an {@link Ext.data.Store} * so that as the data in the store changes the view is automatically updated to reflect the changes.  The view also * provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, * mouseover, mouseout, etc. as well as a built-in selection model. <b>In order to use these features, an {@link #itemSelector} * config must be provided for the DataView to determine what nodes it will be working with.</b> * * <p>The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.Panel}.</p> * <pre><code>var store = new Ext.data.JsonStore({    url: 'get-images.php',    root: 'images',    fields: [        'name', 'url',        {name:'size', type: 'float'},        {name:'lastmod', type:'date', dateFormat:'timestamp'}    ]});store.load();var tpl = new Ext.XTemplate(    '&lt;tpl for="."&gt;',        '&lt;div class="thumb-wrap" id="{name}"&gt;',        '&lt;div class="thumb"&gt;&lt;img src="{url}" title="{name}"&gt;&lt;/div&gt;',        '&lt;span class="x-editable"&gt;{shortName}&lt;/span&gt;&lt;/div&gt;',    '&lt;/tpl&gt;',    '&lt;div class="x-clear"&gt;&lt;/div&gt;');var panel = new Ext.Panel({    id:'images-view',    frame:true,    width:535,    autoHeight:true,    collapsible:true,    layout:'fit',    title:'Simple DataView',    items: new Ext.DataView({        store: store,        tpl: tpl,        autoHeight:true,        multiSelect: true,        overClass:'x-view-over',        itemSelector:'div.thumb-wrap',        emptyText: 'No images to display'    })});panel.render(document.body);</code></pre> * @constructor * Create a new DataView * @param {Object} config The config object */Ext.DataView = Ext.extend(Ext.BoxComponent, {    /**     * @cfg {String/Array} tpl     * The HTML fragment or an array of fragments that will make up the template used by this DataView.  This should     * be specified in the same format expected by the constructor of {@link Ext.XTemplate}.     */    /**     * @cfg {Ext.data.Store} store     * The {@link Ext.data.Store} to bind this DataView to.     */    /**     * @cfg {String} itemSelector     * <b>This is a required setting</b>. A simple CSS selector (e.g. div.some-class or span:first-child) that will be      * used to determine what nodes this DataView will be working with.     */    /**     * @cfg {Boolean} multiSelect     * True to allow selection of more than one item at a time, false to allow selection of only a single item     * at a time or no selection at all, depending on the value of {@link #singleSelect} (defaults to false).     */    /**     * @cfg {Boolean} singleSelect     * True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false).     * Note that if {@link #multiSelect} = true, this value will be ignored.     */    /**     * @cfg {Boolean} simpleSelect     * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl,     * false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).     */    /**     * @cfg {String} overClass     * A CSS class to apply to each item in the view on mouseover (defaults to undefined).     */    /**     * @cfg {String} loadingText     * A string to display during data load operations (defaults to undefined).  If specified, this text will be     * displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's     * contents will continue to display normally until the new data is loaded and the contents are replaced.     */    /**     * @cfg {String} selectedClass     * A CSS class to apply to each selected item in the view (defaults to 'x-view-selected').     */    selectedClass : "x-view-selected",    /**     * @cfg {String} emptyText     * The text to display in the view when there is no data to display (defaults to '').     */    emptyText : "",    /**     * @cfg {Boolean} deferEmptyText True to defer emptyText being applied until the store's first load     */    deferEmptyText: true,    /**     * @cfg {Boolean} trackOver True to enable mouseenter and mouseleave events     */    trackOver: false,    //private    last: false,    // private    initComponent : function(){        Ext.DataView.superclass.initComponent.call(this);        if(typeof this.tpl == "string" || Ext.isArray(this.tpl)){            this.tpl = new Ext.XTemplate(this.tpl);        }        this.addEvents(            /**             * @event beforeclick             * Fires before a click is processed. Returns false to cancel the default action.             * @param {Ext.DataView} this             * @param {Number} index The index of the target node             * @param {HTMLElement} node The target node             * @param {Ext.EventObject} e The raw event object             */            "beforeclick",            /**             * @event click             * Fires when a template node is clicked.             * @param {Ext.DataView} this             * @param {Number} index The index of the target node             * @param {HTMLElement} node The target node             * @param {Ext.EventObject} e The raw event object             */            "click",            /**             * @event mouseenter             * Fires when the mouse enters a template node. trackOver:true or an overCls must be set to enable this event.             * @param {Ext.DataView} this             * @param {Number} index The index of the target node             * @param {HTMLElement} node The target node             * @param {Ext.EventObject} e The raw event object             */            "mouseenter",            /**             * @event mouseleave             * Fires when the mouse leaves a template node. trackOver:true or an overCls must be set to enable this event.             * @param {Ext.DataView} this             * @param {Number} index The index of the target node             * @param {HTMLElement} node The target node             * @param {Ext.EventObject} e The raw event object             */            "mouseleave",            /**             * @event containerclick             * Fires when a click occurs and it is not on a template node.             * @param {Ext.DataView} this             * @param {Ext.EventObject} e The raw event object             */            "containerclick",            /**             * @event dblclick             * Fires when a template node is double clicked.             * @param {Ext.DataView} this             * @param {Number} index The index of the target node             * @param {HTMLElement} node The target node             * @param {Ext.EventObject} e The raw event object             */            "dblclick",            /**             * @event contextmenu             * Fires when a template node is right clicked.             * @param {Ext.DataView} this             * @param {Number} index The index of the target node             * @param {HTMLElement} node The target node             * @param {Ext.EventObject} e The raw event object             */            "contextmenu",            /**             * @event selectionchange             * Fires when the selected nodes change.             * @param {Ext.DataView} this             * @param {Array} selections Array of the selected nodes             */            "selectionchange",            /**             * @event beforeselect             * Fires before a selection is made. If any handlers return false, the selection is cancelled.             * @param {Ext.DataView} this             * @param {HTMLElement} node The node to be selected             * @param {Array} selections Array of currently selected nodes             */            "beforeselect"        );        this.all = new Ext.CompositeElementLite();        this.selected = new Ext.CompositeElementLite();    },    // private    onRender : function(){        if(!this.el){            this.el = document.createElement('div');            this.el.id = this.id;        }        Ext.DataView.superclass.onRender.apply(this, arguments);    },    // private    afterRender : function(){        Ext.DataView.superclass.afterRender.call(this);        this.el.on({            "click": this.onClick,            "dblclick": this.onDblClick,            "contextmenu": this.onContextMenu,            scope:this        });        if(this.overClass || this.trackOver){            this.el.on({                "mouseover": this.onMouseOver,                "mouseout": this.onMouseOut,                scope:this            });        }        if(this.store){            this.setStore(this.store, true);        }    },    /**     * Refreshes the view by reloading the data from the store and re-rendering the template.     */    refresh : function(){        this.clearSelections(false, true);        this.el.update("");        var records = this.store.getRange();        if(records.length < 1){            if(!this.deferEmptyText || this.hasSkippedEmptyText){                this.el.update(this.emptyText);            }            this.all.clear();        }else{            this.tpl.overwrite(this.el, this.collectData(records, 0));            this.all.fill(Ext.query(this.itemSelector, this.el.dom));            this.updateIndexes(0);        }        this.hasSkippedEmptyText = true;    },    /**     * Function which can be overridden to provide custom formatting for each Record that is used by this     * DataView's {@link #tpl template} to render each node.     * @param {Array/Object} data The raw data object that was used to create the Record.     * @param {Number} recordIndex the index number of the Record being prepared for rendering.     * @param {Record} record The Record being prepared for rendering.     * @return {Array/Object} The formatted data in a format expected by the internal {@link #tpl template}'s overwrite() method.     * (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}))     */    prepareData : function(data){        return data;    },    /**     * <p>Function which can be overridden which returns the data object passed to this     * DataView's {@link #tpl template} to render the whole DataView.</p>     * <p>This is usually an Array of data objects, each element of which is processed by an     * {@link Ext.XTemplate XTemplate} which uses <tt>'&lt;tpl for="."&gt;'</tt> to iterate over its supplied     * data object as an Array. However, <i>named</i> properties may be placed into the data object to     * provide non-repeating data such as headings, totals etc.</p>     * @param records {Array} An Array of {@link Ext.data.Record}s to be rendered into the DataView.     * @return {Array} An Array of data objects to be processed by a repeating XTemplate. May also     * contain <i>named</i> properties.     */    collectData : function(records, startIndex){        var r = [];        for(var i = 0, len = records.length; i < len; i++){            r[r.length] = this.prepareData(records[i].data, startIndex+i, records[i]);        }        return r;    },    // private    bufferRender : function(records){        var div = document.createElement('div');        this.tpl.overwrite(div, this.collectData(records));        return Ext.query(this.itemSelector, div);    },    // private    onUpdate : function(ds, record){        var index = this.store.indexOf(record);        var sel = this.isSelected(index);        var original = this.all.elements[index];        var node = this.bufferRender([record], index)[0];        this.all.replaceElement(index, node, true);        if(sel){            this.selected.replaceElement(original, node);            this.all.item(index).addClass(this.selectedClass);        }        this.updateIndexes(index, index);    },    // private    onAdd : function(ds, records, index){        if(this.all.getCount() == 0){            this.refresh();            return;        }        var nodes = this.bufferRender(records, index), n, a = this.all.elements;        if(index < this.all.getCount()){            n = this.all.item(index).insertSibling(nodes, 'before', true);            a.splice.apply(a, [index, 0].concat(nodes));        }else{            n = this.all.last().insertSibling(nodes, 'after', true);            a.push.apply(a, nodes);        }        this.updateIndexes(index);    },    // private    onRemove : function(ds, record, index){        this.deselect(index);        this.all.removeElement(index, true);        this.updateIndexes(index);        if (this.store.getCount() == 0){            this.refresh();        }    },    /**     * Refreshes an individual node's data from the store.     * @param {Number} index The item's data index in the store     */    refreshNode : function(index){        this.onUpdate(this.store, this.store.getAt(index));    },    // private    updateIndexes : function(startIndex, endIndex){