docs/source/AbstractView.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-view-AbstractView'>/**
  19 </span> * @class Ext.view.AbstractView
  20  * @extends Ext.Component
  21  * This is an abstract superclass and should not be used directly. Please see {@link Ext.view.View}.
  22  */
  23 Ext.define('Ext.view.AbstractView', {
  24     extend: 'Ext.Component',
  25     alternateClassName: 'Ext.view.AbstractView',
  26     requires: [
  27         'Ext.LoadMask',
  28         'Ext.data.StoreManager',
  29         'Ext.CompositeElementLite',
  30         'Ext.DomQuery',
  31         'Ext.selection.DataViewModel'
  32     ],
  33
  34     inheritableStatics: {
  35         getRecord: function(node) {
  36             return this.getBoundView(node).getRecord(node);
  37         },
  38
  39         getBoundView: function(node) {
  40             return Ext.getCmp(node.boundView);
  41         }
  42     },
  43
  44 <span id='Ext-view-AbstractView-cfg-tpl'>    /**
  45 </span>     * @cfg {String/Array/Ext.XTemplate} tpl
  46      * @required
  47      * The HTML fragment or an array of fragments that will make up the template used by this DataView.  This should
  48      * be specified in the same format expected by the constructor of {@link Ext.XTemplate}.
  49      */
  50 <span id='Ext-view-AbstractView-cfg-store'>    /**
  51 </span>     * @cfg {Ext.data.Store} store
  52      * @required
  53      * The {@link Ext.data.Store} to bind this DataView to.
  54      */
  55
  56 <span id='Ext-view-AbstractView-cfg-itemSelector'>    /**
  57 </span>     * @cfg {String} itemSelector
  58      * @required
  59      * &lt;b&gt;This is a required setting&lt;/b&gt;. A simple CSS selector (e.g. &lt;tt&gt;div.some-class&lt;/tt&gt; or
  60      * &lt;tt&gt;span:first-child&lt;/tt&gt;) that will be used to determine what nodes this DataView will be
  61      * working with. The itemSelector is used to map DOM nodes to records. As such, there should
  62      * only be one root level element that matches the selector for each record.
  63      */
  64
  65 <span id='Ext-view-AbstractView-cfg-itemCls'>    /**
  66 </span>     * @cfg {String} itemCls
  67      * Specifies the class to be assigned to each element in the view when used in conjunction with the
  68      * {@link #itemTpl} configuration.
  69      */
  70     itemCls: Ext.baseCSSPrefix + 'dataview-item',
  71
  72 <span id='Ext-view-AbstractView-cfg-itemTpl'>    /**
  73 </span>     * @cfg {String/Array/Ext.XTemplate} itemTpl
  74      * The inner portion of the item template to be rendered. Follows an XTemplate
  75      * structure and will be placed inside of a tpl.
  76      */
  77
  78 <span id='Ext-view-AbstractView-cfg-overItemCls'>    /**
  79 </span>     * @cfg {String} overItemCls
  80      * A CSS class to apply to each item in the view on mouseover (defaults to undefined).
  81      * Ensure {@link #trackOver} is set to `true` to make use of this.
  82      */
  83
  84 <span id='Ext-view-AbstractView-cfg-loadingText'>    /**
  85 </span>     * @cfg {String} loadingText
  86      * A string to display during data load operations (defaults to undefined).  If specified, this text will be
  87      * displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's
  88      * contents will continue to display normally until the new data is loaded and the contents are replaced.
  89      */
  90     loadingText: 'Loading...',
  91
  92 <span id='Ext-view-AbstractView-cfg-loadMask'>    /**
  93 </span>     * @cfg {Boolean/Object} loadMask
  94      * False to disable a load mask from displaying will the view is loading. This can also be a
  95      * {@link Ext.LoadMask} configuration object. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
  96      */
  97     loadMask: true,
  98
  99 <span id='Ext-view-AbstractView-cfg-loadingCls'>    /**
 100 </span>     * @cfg {String} loadingCls
 101      * The CSS class to apply to the loading message element (defaults to Ext.LoadMask.prototype.msgCls &quot;x-mask-loading&quot;)
 102      */
 103
 104 <span id='Ext-view-AbstractView-cfg-loadingUseMsg'>    /**
 105 </span>     * @cfg {Boolean} loadingUseMsg
 106      * Whether or not to use the loading message.
 107      * @private
 108      */
 109     loadingUseMsg: true,
 110
 111
 112 <span id='Ext-view-AbstractView-cfg-loadingHeight'>    /**
 113 </span>     * @cfg {Number} loadingHeight
 114      * If specified, gives an explicit height for the data view when it is showing the {@link #loadingText},
 115      * if that is specified. This is useful to prevent the view's height from collapsing to zero when the
 116      * loading mask is applied and there are no other contents in the data view. Defaults to undefined.
 117      */
 118
 119 <span id='Ext-view-AbstractView-cfg-selectedItemCls'>    /**
 120 </span>     * @cfg {String} selectedItemCls
 121      * A CSS class to apply to each selected item in the view (defaults to 'x-view-selected').
 122      */
 123     selectedItemCls: Ext.baseCSSPrefix + 'item-selected',
 124
 125 <span id='Ext-view-AbstractView-cfg-emptyText'>    /**
 126 </span>     * @cfg {String} emptyText
 127      * The text to display in the view when there is no data to display (defaults to '').
 128      * Note that when using local data the emptyText will not be displayed unless you set
 129      * the {@link #deferEmptyText} option to false.
 130      */
 131     emptyText: &quot;&quot;,
 132
 133 <span id='Ext-view-AbstractView-cfg-deferEmptyText'>    /**
 134 </span>     * @cfg {Boolean} deferEmptyText True to defer emptyText being applied until the store's first load
 135      */
 136     deferEmptyText: true,
 137
 138 <span id='Ext-view-AbstractView-cfg-trackOver'>    /**
 139 </span>     * @cfg {Boolean} trackOver True to enable mouseenter and mouseleave events
 140      */
 141     trackOver: false,
 142
 143 <span id='Ext-view-AbstractView-cfg-blockRefresh'>    /**
 144 </span>     * @cfg {Boolean} blockRefresh Set this to true to ignore datachanged events on the bound store. This is useful if
 145      * you wish to provide custom transition animations via a plugin (defaults to false)
 146      */
 147     blockRefresh: false,
 148
 149 <span id='Ext-view-AbstractView-cfg-disableSelection'>    /**
 150 </span>     * @cfg {Boolean} disableSelection &lt;p&gt;&lt;tt&gt;true&lt;/tt&gt; to disable selection within the DataView. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 151      * This configuration will lock the selection model that the DataView uses.&lt;/p&gt;
 152      */
 153
 154
 155     //private
 156     last: false,
 157
 158     triggerEvent: 'itemclick',
 159     triggerCtEvent: 'containerclick',
 160
 161     addCmpEvents: function() {
 162
 163     },
 164
 165     // private
 166     initComponent : function(){
 167         var me = this,
 168             isDef = Ext.isDefined,
 169             itemTpl = me.itemTpl,
 170             memberFn = {};
 171
 172         if (itemTpl) {
 173             if (Ext.isArray(itemTpl)) {
 174                 // string array
 175                 itemTpl = itemTpl.join('');
 176             } else if (Ext.isObject(itemTpl)) {
 177                 // tpl instance
 178                 memberFn = Ext.apply(memberFn, itemTpl.initialConfig);
 179                 itemTpl = itemTpl.html;
 180             }
 181
 182             if (!me.itemSelector) {
 183                 me.itemSelector = '.' + me.itemCls;
 184             }
 185
 186             itemTpl = Ext.String.format('&lt;tpl for=&quot;.&quot;&gt;&lt;div class=&quot;{0}&quot;&gt;{1}&lt;/div&gt;&lt;/tpl&gt;', me.itemCls, itemTpl);
 187             me.tpl = Ext.create('Ext.XTemplate', itemTpl, memberFn);
 188         }
 189
 190         //&lt;debug&gt;
 191         if (!isDef(me.tpl) || !isDef(me.itemSelector)) {
 192             Ext.Error.raise({
 193                 sourceClass: 'Ext.view.View',
 194                 tpl: me.tpl,
 195                 itemSelector: me.itemSelector,
 196                 msg: &quot;DataView requires both tpl and itemSelector configurations to be defined.&quot;
 197             });
 198         }
 199         //&lt;/debug&gt;
 200
 201         me.callParent();
 202         if(Ext.isString(me.tpl) || Ext.isArray(me.tpl)){
 203             me.tpl = Ext.create('Ext.XTemplate', me.tpl);
 204         }
 205
 206         //&lt;debug&gt;
 207         // backwards compat alias for overClass/selectedClass
 208         // TODO: Consider support for overCls generation Ext.Component config
 209         if (isDef(me.overCls) || isDef(me.overClass)) {
 210             if (Ext.isDefined(Ext.global.console)) {
 211                 Ext.global.console.warn('Ext.view.View: Using the deprecated overCls or overClass configuration. Use overItemCls instead.');
 212             }
 213             me.overItemCls = me.overCls || me.overClass;
 214             delete me.overCls;
 215             delete me.overClass;
 216         }
 217
 218         if (me.overItemCls) {
 219             me.trackOver = true;
 220         }
 221
 222         if (isDef(me.selectedCls) || isDef(me.selectedClass)) {
 223             if (Ext.isDefined(Ext.global.console)) {
 224                 Ext.global.console.warn('Ext.view.View: Using the deprecated selectedCls or selectedClass configuration. Use selectedItemCls instead.');
 225             }
 226             me.selectedItemCls = me.selectedCls || me.selectedClass;
 227             delete me.selectedCls;
 228             delete me.selectedClass;
 229         }
 230         //&lt;/debug&gt;
 231
 232         me.addEvents(
 233 <span id='Ext-view-AbstractView-event-beforerefresh'>            /**
 234 </span>             * @event beforerefresh
 235              * Fires before the view is refreshed
 236              * @param {Ext.view.View} this The DataView object
 237              */
 238             'beforerefresh',
 239 <span id='Ext-view-AbstractView-event-refresh'>            /**
 240 </span>             * @event refresh
 241              * Fires when the view is refreshed
 242              * @param {Ext.view.View} this The DataView object
 243              */
 244             'refresh',
 245 <span id='Ext-view-AbstractView-event-itemupdate'>            /**
 246 </span>             * @event itemupdate
 247              * Fires when the node associated with an individual record is updated
 248              * @param {Ext.data.Model} record The model instance
 249              * @param {Number} index The index of the record/node
 250              * @param {HTMLElement} node The node that has just been updated
 251              */
 252             'itemupdate',
 253 <span id='Ext-view-AbstractView-event-itemadd'>            /**
 254 </span>             * @event itemadd
 255              * Fires when the nodes associated with an recordset have been added to the underlying store
 256              * @param {Array[Ext.data.Model]} records The model instance
 257              * @param {Number} index The index at which the set of record/nodes starts
 258              * @param {Array[HTMLElement]} node The node that has just been updated
 259              */
 260             'itemadd',
 261 <span id='Ext-view-AbstractView-event-itemremove'>            /**
 262 </span>             * @event itemremove
 263              * Fires when the node associated with an individual record is removed
 264              * @param {Ext.data.Model} record The model instance
 265              * @param {Number} index The index of the record/node
 266              */
 267             'itemremove'
 268         );
 269
 270         me.addCmpEvents();
 271
 272         if (me.store) {
 273             me.store = Ext.data.StoreManager.lookup(me.store);
 274         }
 275         me.all = new Ext.CompositeElementLite();
 276     },
 277
 278     onRender: function() {
 279         var me = this,
 280             mask = me.loadMask,
 281             cfg = {
 282                 msg: me.loadingText,
 283                 msgCls: me.loadingCls,
 284                 useMsg: me.loadingUseMsg
 285             };
 286
 287         me.callParent(arguments);
 288
 289         if (mask) {
 290             // either a config object
 291             if (Ext.isObject(mask)) {
 292                 cfg = Ext.apply(cfg, mask);
 293             }
 294             // Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.
 295             // If this DataView is floating, then mask this DataView.
 296             // Otherwise, mask its owning Container (or this, if there *is* no owning Container).
 297             // LoadMask captures the element upon render.
 298             me.loadMask = Ext.create('Ext.LoadMask', me.floating ? me : me.ownerCt || me, cfg);
 299             me.loadMask.on({
 300                 scope: me,
 301                 beforeshow: me.onMaskBeforeShow,
 302                 hide: me.onMaskHide
 303             });
 304         }
 305     },
 306
 307     onMaskBeforeShow: function(){
 308         var me = this;
 309         me.getSelectionModel().deselectAll();
 310         me.all.clear();
 311         if (me.loadingHeight) {
 312             me.setCalculatedSize(undefined, me.loadingHeight);
 313         }
 314     },
 315
 316     onMaskHide: function(){
 317         if (!this.destroying &amp;&amp; this.loadingHeight) {
 318             this.setHeight(this.height);
 319         }
 320     },
 321
 322     afterRender: function() {
 323         this.callParent(arguments);
 324
 325         // Init the SelectionModel after any on('render') listeners have been added.
 326         // Drag plugins create a DragDrop instance in a render listener, and that needs
 327         // to see an itemmousedown event first.
 328         this.getSelectionModel().bindComponent(this);
 329     },
 330
 331 <span id='Ext-view-AbstractView-method-getSelectionModel'>    /**
 332 </span>     * Gets the selection model for this view.
 333      * @return {Ext.selection.Model} The selection model
 334      */
 335     getSelectionModel: function(){
 336         var me = this,
 337             mode = 'SINGLE';
 338
 339         if (!me.selModel) {
 340             me.selModel = {};
 341         }
 342
 343         if (me.simpleSelect) {
 344             mode = 'SIMPLE';
 345         } else if (me.multiSelect) {
 346             mode = 'MULTI';
 347         }
 348
 349         Ext.applyIf(me.selModel, {
 350             allowDeselect: me.allowDeselect,
 351             mode: mode
 352         });
 353
 354         if (!me.selModel.events) {
 355             me.selModel = Ext.create('Ext.selection.DataViewModel', me.selModel);
 356         }
 357
 358         if (!me.selModel.hasRelaySetup) {
 359             me.relayEvents(me.selModel, [
 360                 'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect'
 361             ]);
 362             me.selModel.hasRelaySetup = true;
 363         }
 364
 365         // lock the selection model if user
 366         // has disabled selection
 367         if (me.disableSelection) {
 368             me.selModel.locked = true;
 369         }
 370
 371         return me.selModel;
 372     },
 373
 374 <span id='Ext-view-AbstractView-method-refresh'>    /**
 375 </span>     * Refreshes the view by reloading the data from the store and re-rendering the template.
 376      */
 377     refresh: function() {
 378         var me = this,
 379             el,
 380             records;
 381
 382         if (!me.rendered) {
 383             return;
 384         }
 385
 386         me.fireEvent('beforerefresh', me);
 387         el = me.getTargetEl();
 388         records = me.store.getRange();
 389
 390         el.update('');
 391         if (records.length &lt; 1) {
 392             if (!me.deferEmptyText || me.hasSkippedEmptyText) {
 393                 el.update(me.emptyText);
 394             }
 395             me.all.clear();
 396         } else {
 397             me.tpl.overwrite(el, me.collectData(records, 0));
 398             me.all.fill(Ext.query(me.getItemSelector(), el.dom));
 399             me.updateIndexes(0);
 400         }
 401
 402         me.selModel.refresh();
 403         me.hasSkippedEmptyText = true;
 404         me.fireEvent('refresh', me);
 405     },
 406
 407 <span id='Ext-view-AbstractView-method-prepareData'>    /**
 408 </span>     * Function which can be overridden to provide custom formatting for each Record that is used by this
 409      * DataView's {@link #tpl template} to render each node.
 410      * @param {Array/Object} data The raw data object that was used to create the Record.
 411      * @param {Number} recordIndex the index number of the Record being prepared for rendering.
 412      * @param {Record} record The Record being prepared for rendering.
 413      * @return {Array/Object} The formatted data in a format expected by the internal {@link #tpl template}'s overwrite() method.
 414      * (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}))
 415      */
 416     prepareData: function(data, index, record) {
 417         if (record) {
 418             Ext.apply(data, record.getAssociatedData());
 419         }
 420         return data;
 421     },
 422
 423 <span id='Ext-view-AbstractView-method-collectData'>    /**
 424 </span>     * &lt;p&gt;Function which can be overridden which returns the data object passed to this
 425      * DataView's {@link #tpl template} to render the whole DataView.&lt;/p&gt;
 426      * &lt;p&gt;This is usually an Array of data objects, each element of which is processed by an
 427      * {@link Ext.XTemplate XTemplate} which uses &lt;tt&gt;'&amp;lt;tpl for=&quot;.&quot;&amp;gt;'&lt;/tt&gt; to iterate over its supplied
 428      * data object as an Array. However, &lt;i&gt;named&lt;/i&gt; properties may be placed into the data object to
 429      * provide non-repeating data such as headings, totals etc.&lt;/p&gt;
 430      * @param {Array} records An Array of {@link Ext.data.Model}s to be rendered into the DataView.
 431      * @param {Number} startIndex the index number of the Record being prepared for rendering.
 432      * @return {Array} An Array of data objects to be processed by a repeating XTemplate. May also
 433      * contain &lt;i&gt;named&lt;/i&gt; properties.
 434      */
 435     collectData : function(records, startIndex){
 436         var r = [],
 437             i = 0,
 438             len = records.length,
 439             record;
 440
 441         for(; i &lt; len; i++){
 442             record = records[i];
 443             r[r.length] = this.prepareData(record[record.persistenceProperty], startIndex + i, record);
 444         }
 445         return r;
 446     },
 447
 448     // private
 449     bufferRender : function(records, index){
 450         var div = document.createElement('div');
 451         this.tpl.overwrite(div, this.collectData(records, index));
 452         return Ext.query(this.getItemSelector(), div);
 453     },
 454
 455     // private
 456     onUpdate : function(ds, record){
 457         var me = this,
 458             index = me.store.indexOf(record),
 459             node;
 460
 461         if (index &gt; -1){
 462             node = me.bufferRender([record], index)[0];
 463
 464             me.all.replaceElement(index, node, true);
 465             me.updateIndexes(index, index);
 466
 467             // Maintain selection after update
 468             // TODO: Move to approriate event handler.
 469             me.selModel.refresh();
 470             me.fireEvent('itemupdate', record, index, node);
 471         }
 472
 473     },
 474
 475     // private
 476     onAdd : function(ds, records, index) {
 477         var me = this,
 478             nodes;
 479
 480         if (me.all.getCount() === 0) {
 481             me.refresh();
 482             return;
 483         }
 484
 485         nodes = me.bufferRender(records, index);
 486         me.doAdd(nodes, records, index);
 487
 488         me.selModel.refresh();
 489         me.updateIndexes(index);
 490         me.fireEvent('itemadd', records, index, nodes);
 491     },
 492
 493     doAdd: function(nodes, records, index) {
 494         var all = this.all;
 495
 496         if (index &lt; all.getCount()) {
 497             all.item(index).insertSibling(nodes, 'before', true);
 498         }
 499         else {
 500             all.last().insertSibling(nodes, 'after', true);
 501         }
 502
 503         Ext.Array.insert(all.elements, index, nodes);
 504     },
 505
 506     // private
 507     onRemove : function(ds, record, index) {
 508         var me = this;
 509
 510         me.doRemove(record, index);
 511         me.updateIndexes(index);
 512         if (me.store.getCount() === 0){
 513             me.refresh();
 514         }
 515         me.fireEvent('itemremove', record, index);
 516     },
 517
 518     doRemove: function(record, index) {
 519         this.all.removeElement(index, true);
 520     },
 521
 522 <span id='Ext-view-AbstractView-method-refreshNode'>    /**
 523 </span>     * Refreshes an individual node's data from the store.
 524      * @param {Number} index The item's data index in the store
 525      */
 526     refreshNode : function(index){
 527         this.onUpdate(this.store, this.store.getAt(index));
 528     },
 529
 530     // private
 531     updateIndexes : function(startIndex, endIndex) {
 532         var ns = this.all.elements,
 533             records = this.store.getRange();
 534         startIndex = startIndex || 0;
 535         endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
 536         for(var i = startIndex; i &lt;= endIndex; i++){
 537             ns[i].viewIndex = i;
 538             ns[i].viewRecordId = records[i].internalId;
 539             if (!ns[i].boundView) {
 540                 ns[i].boundView = this.id;
 541             }
 542         }
 543     },
 544
 545 <span id='Ext-view-AbstractView-method-getStore'>    /**
 546 </span>     * Returns the store associated with this DataView.
 547      * @return {Ext.data.Store} The store
 548      */
 549     getStore : function(){
 550         return this.store;
 551     },
 552
 553 <span id='Ext-view-AbstractView-method-bindStore'>    /**
 554 </span>     * Changes the data store bound to this view and refreshes it.
 555      * @param {Store} store The store to bind to this view
 556      */
 557     bindStore : function(store, initial) {
 558         var me = this;
 559
 560         if (!initial &amp;&amp; me.store) {
 561             if (store !== me.store &amp;&amp; me.store.autoDestroy) {
 562                 me.store.destroy();
 563             }
 564             else {
 565                 me.mun(me.store, {
 566                     scope: me,
 567                     datachanged: me.onDataChanged,
 568                     add: me.onAdd,
 569                     remove: me.onRemove,
 570                     update: me.onUpdate,
 571                     clear: me.refresh
 572                 });
 573             }
 574             if (!store) {
 575                 if (me.loadMask) {
 576                     me.loadMask.bindStore(null);
 577                 }
 578                 me.store = null;
 579             }
 580         }
 581         if (store) {
 582             store = Ext.data.StoreManager.lookup(store);
 583             me.mon(store, {
 584                 scope: me,
 585                 datachanged: me.onDataChanged,
 586                 add: me.onAdd,
 587                 remove: me.onRemove,
 588                 update: me.onUpdate,
 589                 clear: me.refresh
 590             });
 591             if (me.loadMask) {
 592                 me.loadMask.bindStore(store);
 593             }
 594         }
 595
 596         me.store = store;
 597         // Bind the store to our selection model
 598         me.getSelectionModel().bind(store);
 599
 600         if (store &amp;&amp; (!initial || store.getCount())) {
 601             me.refresh(true);
 602         }
 603     },
 604
 605 <span id='Ext-view-AbstractView-method-onDataChanged'>    /**
 606 </span>     * @private
 607      * Calls this.refresh if this.blockRefresh is not true
 608      */
 609     onDataChanged: function() {
 610         if (this.blockRefresh !== true) {
 611             this.refresh.apply(this, arguments);
 612         }
 613     },
 614
 615 <span id='Ext-view-AbstractView-method-findItemByChild'>    /**
 616 </span>     * Returns the template node the passed child belongs to, or null if it doesn't belong to one.
 617      * @param {HTMLElement} node
 618      * @return {HTMLElement} The template node
 619      */
 620     findItemByChild: function(node){
 621         return Ext.fly(node).findParent(this.getItemSelector(), this.getTargetEl());
 622     },
 623
 624 <span id='Ext-view-AbstractView-method-findTargetByEvent'>    /**
 625 </span>     * Returns the template node by the Ext.EventObject or null if it is not found.
 626      * @param {Ext.EventObject} e
 627      */
 628     findTargetByEvent: function(e) {
 629         return e.getTarget(this.getItemSelector(), this.getTargetEl());
 630     },
 631
 632
 633 <span id='Ext-view-AbstractView-method-getSelectedNodes'>    /**
 634 </span>     * Gets the currently selected nodes.
 635      * @return {Array} An array of HTMLElements
 636      */
 637     getSelectedNodes: function(){
 638         var nodes   = [],
 639             records = this.selModel.getSelection(),
 640             ln = records.length,
 641             i  = 0;
 642
 643         for (; i &lt; ln; i++) {
 644             nodes.push(this.getNode(records[i]));
 645         }
 646
 647         return nodes;
 648     },
 649
 650 <span id='Ext-view-AbstractView-method-getRecords'>    /**
 651 </span>     * Gets an array of the records from an array of nodes
 652      * @param {Array} nodes The nodes to evaluate
 653      * @return {Array} records The {@link Ext.data.Model} objects
 654      */
 655     getRecords: function(nodes) {
 656         var records = [],
 657             i = 0,
 658             len = nodes.length,
 659             data = this.store.data;
 660
 661         for (; i &lt; len; i++) {
 662             records[records.length] = data.getByKey(nodes[i].viewRecordId);
 663         }
 664
 665         return records;
 666     },
 667
 668 <span id='Ext-view-AbstractView-method-getRecord'>    /**
 669 </span>     * Gets a record from a node
 670      * @param {Element/HTMLElement} node The node to evaluate
 671      *
 672      * @return {Record} record The {@link Ext.data.Model} object
 673      */
 674     getRecord: function(node){
 675         return this.store.data.getByKey(Ext.getDom(node).viewRecordId);
 676     },
 677
 678
 679 <span id='Ext-view-AbstractView-method-isSelected'>    /**
 680 </span>     * Returns true if the passed node is selected, else false.
 681      * @param {HTMLElement/Number/Ext.data.Model} node The node, node index or record to check
 682      * @return {Boolean} True if selected, else false
 683      */
 684     isSelected : function(node) {
 685         // TODO: El/Idx/Record
 686         var r = this.getRecord(node);
 687         return this.selModel.isSelected(r);
 688     },
 689
 690 <span id='Ext-view-AbstractView-method-select'>    /**
 691 </span>     * Selects a record instance by record instance or index.
 692      * @param {Ext.data.Model/Index} records An array of records or an index
 693      * @param {Boolean} keepExisting
 694      * @param {Boolean} suppressEvent Set to false to not fire a select event
 695      */
 696     select: function(records, keepExisting, suppressEvent) {
 697         this.selModel.select(records, keepExisting, suppressEvent);
 698     },
 699
 700 <span id='Ext-view-AbstractView-method-deselect'>    /**
 701 </span>     * Deselects a record instance by record instance or index.
 702      * @param {Ext.data.Model/Index} records An array of records or an index
 703      * @param {Boolean} suppressEvent Set to false to not fire a deselect event
 704      */
 705     deselect: function(records, suppressEvent) {
 706         this.selModel.deselect(records, suppressEvent);
 707     },
 708
 709 <span id='Ext-view-AbstractView-method-getNode'>    /**
 710 </span>     * Gets a template node.
 711      * @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo An HTMLElement template node, index of a template node,
 712      * the id of a template node or the record associated with the node.
 713      * @return {HTMLElement} The node or null if it wasn't found
 714      */
 715     getNode : function(nodeInfo) {
 716         if (Ext.isString(nodeInfo)) {
 717             return document.getElementById(nodeInfo);
 718         } else if (Ext.isNumber(nodeInfo)) {
 719             return this.all.elements[nodeInfo];
 720         } else if (nodeInfo instanceof Ext.data.Model) {
 721             return this.getNodeByRecord(nodeInfo);
 722         }
 723         return nodeInfo;
 724     },
 725
 726 <span id='Ext-view-AbstractView-method-getNodeByRecord'>    /**
 727 </span>     * @private
 728      */
 729     getNodeByRecord: function(record) {
 730         var ns = this.all.elements,
 731             ln = ns.length,
 732             i = 0;
 733
 734         for (; i &lt; ln; i++) {
 735             if (ns[i].viewRecordId === record.internalId) {
 736                 return ns[i];
 737             }
 738         }
 739
 740         return null;
 741     },
 742
 743 <span id='Ext-view-AbstractView-method-getNodes'>    /**
 744 </span>     * Gets a range nodes.
 745      * @param {Number} start (optional) The index of the first node in the range
 746      * @param {Number} end (optional) The index of the last node in the range
 747      * @return {Array} An array of nodes
 748      */
 749     getNodes: function(start, end) {
 750         var ns = this.all.elements,
 751             nodes = [],
 752             i;
 753
 754         start = start || 0;
 755         end = !Ext.isDefined(end) ? Math.max(ns.length - 1, 0) : end;
 756         if (start &lt;= end) {
 757             for (i = start; i &lt;= end &amp;&amp; ns[i]; i++) {
 758                 nodes.push(ns[i]);
 759             }
 760         } else {
 761             for (i = start; i &gt;= end &amp;&amp; ns[i]; i--) {
 762                 nodes.push(ns[i]);
 763             }
 764         }
 765         return nodes;
 766     },
 767
 768 <span id='Ext-view-AbstractView-method-indexOf'>    /**
 769 </span>     * Finds the index of the passed node.
 770      * @param {HTMLElement/String/Number/Record} nodeInfo An HTMLElement template node, index of a template node, the id of a template node
 771      * or a record associated with a node.
 772      * @return {Number} The index of the node or -1
 773      */
 774     indexOf: function(node) {
 775         node = this.getNode(node);
 776         if (Ext.isNumber(node.viewIndex)) {
 777             return node.viewIndex;
 778         }
 779         return this.all.indexOf(node);
 780     },
 781
 782     onDestroy : function() {
 783         var me = this;
 784
 785         me.all.clear();
 786         me.callParent();
 787         me.bindStore(null);
 788         me.selModel.destroy();
 789     },
 790
 791     // invoked by the selection model to maintain visual UI cues
 792     onItemSelect: function(record) {
 793         var node = this.getNode(record);
 794         Ext.fly(node).addCls(this.selectedItemCls);
 795     },
 796
 797     // invoked by the selection model to maintain visual UI cues
 798     onItemDeselect: function(record) {
 799         var node = this.getNode(record);
 800         Ext.fly(node).removeCls(this.selectedItemCls);
 801     },
 802
 803     getItemSelector: function() {
 804         return this.itemSelector;
 805     }
 806 }, function() {
 807     // all of this information is available directly
 808     // from the SelectionModel itself, the only added methods
 809     // to DataView regarding selection will perform some transformation/lookup
 810     // between HTMLElement/Nodes to records and vice versa.
 811     Ext.deprecate('extjs', '4.0', function() {
 812         Ext.view.AbstractView.override({
 813 <span id='Ext-view-AbstractView-cfg-multiSelect'>            /**
 814 </span>             * @cfg {Boolean} multiSelect
 815              * True to allow selection of more than one item at a time, false to allow selection of only a single item
 816              * at a time or no selection at all, depending on the value of {@link #singleSelect} (defaults to false).
 817              */
 818 <span id='Ext-view-AbstractView-cfg-singleSelect'>            /**
 819 </span>             * @cfg {Boolean} singleSelect
 820              * True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false).
 821              * Note that if {@link #multiSelect} = true, this value will be ignored.
 822              */
 823 <span id='Ext-view-AbstractView-cfg-simpleSelect'>            /**
 824 </span>             * @cfg {Boolean} simpleSelect
 825              * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl,
 826              * false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).
 827              */
 828
 829 <span id='Ext-view-AbstractView-method-getSelectionCount'>            /**
 830 </span>             * Gets the number of selected nodes.
 831              * @return {Number} The node count
 832              */
 833             getSelectionCount : function(){
 834                 if (Ext.global.console) {
 835                     Ext.global.console.warn(&quot;DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel&quot;);
 836                 }
 837                 return this.selModel.getSelection().length;
 838             },
 839
 840 <span id='Ext-view-AbstractView-method-getSelectedRecords'>            /**
 841 </span>             * Gets an array of the selected records
 842              * @return {Array} An array of {@link Ext.data.Model} objects
 843              */
 844             getSelectedRecords : function(){
 845                 if (Ext.global.console) {
 846                     Ext.global.console.warn(&quot;DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel&quot;);
 847                 }
 848                 return this.selModel.getSelection();
 849             },
 850
 851             select: function(records, keepExisting, supressEvents) {
 852                 if (Ext.global.console) {
 853                     Ext.global.console.warn(&quot;DataView: select will be removed, please access select through a DataView's SelectionModel, ie: view.getSelectionModel().select()&quot;);
 854                 }
 855                 var sm = this.getSelectionModel();
 856                 return sm.select.apply(sm, arguments);
 857             },
 858
 859             clearSelections: function() {
 860                 if (Ext.global.console) {
 861                     Ext.global.console.warn(&quot;DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()&quot;);
 862                 }
 863                 var sm = this.getSelectionModel();
 864                 return sm.deselectAll();
 865             }
 866         });
 867     });
 868 });
 869 </pre>
 870 </body>
 871 </html>