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