docs/source/View3.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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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-View'>/**
  19 </span> * A mechanism for displaying data using custom layout templates and formatting.
  20  *
  21  * The View uses an {@link Ext.XTemplate} as its internal templating mechanism, and is bound to an
  22  * {@link Ext.data.Store} so that as the data in the store changes the view is automatically updated
  23  * to reflect the changes. The view also provides built-in behavior for many common events that can
  24  * occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a
  25  * built-in selection model. **In order to use these features, an {@link #itemSelector} config must
  26  * be provided for the DataView to determine what nodes it will be working with.**
  27  *
  28  * The example below binds a View to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
  29  *
  30  *     @example
  31  *     Ext.define('Image', {
  32  *         extend: 'Ext.data.Model',
  33  *         fields: [
  34  *             { name:'src', type:'string' },
  35  *             { name:'caption', type:'string' }
  36  *         ]
  37  *     });
  38  *
  39  *     Ext.create('Ext.data.Store', {
  40  *         id:'imagesStore',
  41  *         model: 'Image',
  42  *         data: [
  43  *             { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing &amp; Charts' },
  44  *             { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
  45  *             { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
  46  *             { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
  47  *         ]
  48  *     });
  49  *
  50  *     var imageTpl = new Ext.XTemplate(
  51  *         '&lt;tpl for=&quot;.&quot;&gt;',
  52  *             '&lt;div style=&quot;margin-bottom: 10px;&quot; class=&quot;thumb-wrap&quot;&gt;',
  53  *               '&lt;img src=&quot;{src}&quot; /&gt;',
  54  *               '&lt;br/&gt;&lt;span&gt;{caption}&lt;/span&gt;',
  55  *             '&lt;/div&gt;',
  56  *         '&lt;/tpl&gt;'
  57  *     );
  58  *
  59  *     Ext.create('Ext.view.View', {
  60  *         store: Ext.data.StoreManager.lookup('imagesStore'),
  61  *         tpl: imageTpl,
  62  *         itemSelector: 'div.thumb-wrap',
  63  *         emptyText: 'No images available',
  64  *         renderTo: Ext.getBody()
  65  *     });
  66  */
  67 Ext.define('Ext.view.View', {
  68     extend: 'Ext.view.AbstractView',
  69     alternateClassName: 'Ext.DataView',
  70     alias: 'widget.dataview',
  71
  72     inheritableStatics: {
  73         EventMap: {
  74             mousedown: 'MouseDown',
  75             mouseup: 'MouseUp',
  76             click: 'Click',
  77             dblclick: 'DblClick',
  78             contextmenu: 'ContextMenu',
  79             mouseover: 'MouseOver',
  80             mouseout: 'MouseOut',
  81             mouseenter: 'MouseEnter',
  82             mouseleave: 'MouseLeave',
  83             keydown: 'KeyDown',
  84             focus: 'Focus'
  85         }
  86     },
  87
  88     addCmpEvents: function() {
  89         this.addEvents(
  90 <span id='Ext-view-View-event-beforeitemmousedown'>            /**
  91 </span>             * @event beforeitemmousedown
  92              * Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
  93              * @param {Ext.view.View} this
  94              * @param {Ext.data.Model} record The record that belongs to the item
  95              * @param {HTMLElement} item The item's element
  96              * @param {Number} index The item's index
  97              * @param {Ext.EventObject} e The raw event object
  98              */
  99             'beforeitemmousedown',
 100 <span id='Ext-view-View-event-beforeitemmouseup'>            /**
 101 </span>             * @event beforeitemmouseup
 102              * Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
 103              * @param {Ext.view.View} this
 104              * @param {Ext.data.Model} record The record that belongs to the item
 105              * @param {HTMLElement} item The item's element
 106              * @param {Number} index The item's index
 107              * @param {Ext.EventObject} e The raw event object
 108              */
 109             'beforeitemmouseup',
 110 <span id='Ext-view-View-event-beforeitemmouseenter'>            /**
 111 </span>             * @event beforeitemmouseenter
 112              * Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
 113              * @param {Ext.view.View} this
 114              * @param {Ext.data.Model} record The record that belongs to the item
 115              * @param {HTMLElement} item The item's element
 116              * @param {Number} index The item's index
 117              * @param {Ext.EventObject} e The raw event object
 118              */
 119             'beforeitemmouseenter',
 120 <span id='Ext-view-View-event-beforeitemmouseleave'>            /**
 121 </span>             * @event beforeitemmouseleave
 122              * Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
 123              * @param {Ext.view.View} this
 124              * @param {Ext.data.Model} record The record that belongs to the item
 125              * @param {HTMLElement} item The item's element
 126              * @param {Number} index The item's index
 127              * @param {Ext.EventObject} e The raw event object
 128              */
 129             'beforeitemmouseleave',
 130 <span id='Ext-view-View-event-beforeitemclick'>            /**
 131 </span>             * @event beforeitemclick
 132              * Fires before the click event on an item is processed. Returns false to cancel the default action.
 133              * @param {Ext.view.View} this
 134              * @param {Ext.data.Model} record The record that belongs to the item
 135              * @param {HTMLElement} item The item's element
 136              * @param {Number} index The item's index
 137              * @param {Ext.EventObject} e The raw event object
 138              */
 139             'beforeitemclick',
 140 <span id='Ext-view-View-event-beforeitemdblclick'>            /**
 141 </span>             * @event beforeitemdblclick
 142              * Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
 143              * @param {Ext.view.View} this
 144              * @param {Ext.data.Model} record The record that belongs to the item
 145              * @param {HTMLElement} item The item's element
 146              * @param {Number} index The item's index
 147              * @param {Ext.EventObject} e The raw event object
 148              */
 149             'beforeitemdblclick',
 150 <span id='Ext-view-View-event-beforeitemcontextmenu'>            /**
 151 </span>             * @event beforeitemcontextmenu
 152              * Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
 153              * @param {Ext.view.View} this
 154              * @param {Ext.data.Model} record The record that belongs to the item
 155              * @param {HTMLElement} item The item's element
 156              * @param {Number} index The item's index
 157              * @param {Ext.EventObject} e The raw event object
 158              */
 159             'beforeitemcontextmenu',
 160 <span id='Ext-view-View-event-beforeitemkeydown'>            /**
 161 </span>             * @event beforeitemkeydown
 162              * Fires before the keydown event on an item is processed. Returns false to cancel the default action.
 163              * @param {Ext.view.View} this
 164              * @param {Ext.data.Model} record The record that belongs to the item
 165              * @param {HTMLElement} item The item's element
 166              * @param {Number} index The item's index
 167              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
 168              */
 169             'beforeitemkeydown',
 170 <span id='Ext-view-View-event-itemmousedown'>            /**
 171 </span>             * @event itemmousedown
 172              * Fires when there is a mouse down on an item
 173              * @param {Ext.view.View} this
 174              * @param {Ext.data.Model} record The record that belongs to the item
 175              * @param {HTMLElement} item The item's element
 176              * @param {Number} index The item's index
 177              * @param {Ext.EventObject} e The raw event object
 178              */
 179             'itemmousedown',
 180 <span id='Ext-view-View-event-itemmouseup'>            /**
 181 </span>             * @event itemmouseup
 182              * Fires when there is a mouse up on an item
 183              * @param {Ext.view.View} this
 184              * @param {Ext.data.Model} record The record that belongs to the item
 185              * @param {HTMLElement} item The item's element
 186              * @param {Number} index The item's index
 187              * @param {Ext.EventObject} e The raw event object
 188              */
 189             'itemmouseup',
 190 <span id='Ext-view-View-event-itemmouseenter'>            /**
 191 </span>             * @event itemmouseenter
 192              * Fires when the mouse enters an item.
 193              * @param {Ext.view.View} this
 194              * @param {Ext.data.Model} record The record that belongs to the item
 195              * @param {HTMLElement} item The item's element
 196              * @param {Number} index The item's index
 197              * @param {Ext.EventObject} e The raw event object
 198              */
 199             'itemmouseenter',
 200 <span id='Ext-view-View-event-itemmouseleave'>            /**
 201 </span>             * @event itemmouseleave
 202              * Fires when the mouse leaves an item.
 203              * @param {Ext.view.View} this
 204              * @param {Ext.data.Model} record The record that belongs to the item
 205              * @param {HTMLElement} item The item's element
 206              * @param {Number} index The item's index
 207              * @param {Ext.EventObject} e The raw event object
 208              */
 209             'itemmouseleave',
 210 <span id='Ext-view-View-event-itemclick'>            /**
 211 </span>             * @event itemclick
 212              * Fires when an item is clicked.
 213              * @param {Ext.view.View} this
 214              * @param {Ext.data.Model} record The record that belongs to the item
 215              * @param {HTMLElement} item The item's element
 216              * @param {Number} index The item's index
 217              * @param {Ext.EventObject} e The raw event object
 218              */
 219             'itemclick',
 220 <span id='Ext-view-View-event-itemdblclick'>            /**
 221 </span>             * @event itemdblclick
 222              * Fires when an item is double clicked.
 223              * @param {Ext.view.View} this
 224              * @param {Ext.data.Model} record The record that belongs to the item
 225              * @param {HTMLElement} item The item's element
 226              * @param {Number} index The item's index
 227              * @param {Ext.EventObject} e The raw event object
 228              */
 229             'itemdblclick',
 230 <span id='Ext-view-View-event-itemcontextmenu'>            /**
 231 </span>             * @event itemcontextmenu
 232              * Fires when an item is right clicked.
 233              * @param {Ext.view.View} this
 234              * @param {Ext.data.Model} record The record that belongs to the item
 235              * @param {HTMLElement} item The item's element
 236              * @param {Number} index The item's index
 237              * @param {Ext.EventObject} e The raw event object
 238              */
 239             'itemcontextmenu',
 240 <span id='Ext-view-View-event-itemkeydown'>            /**
 241 </span>             * @event itemkeydown
 242              * Fires when a key is pressed while an item is currently selected.
 243              * @param {Ext.view.View} this
 244              * @param {Ext.data.Model} record The record that belongs to the item
 245              * @param {HTMLElement} item The item's element
 246              * @param {Number} index The item's index
 247              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
 248              */
 249             'itemkeydown',
 250 <span id='Ext-view-View-event-beforecontainermousedown'>            /**
 251 </span>             * @event beforecontainermousedown
 252              * Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
 253              * @param {Ext.view.View} this
 254              * @param {Ext.EventObject} e The raw event object
 255              */
 256             'beforecontainermousedown',
 257 <span id='Ext-view-View-event-beforecontainermouseup'>            /**
 258 </span>             * @event beforecontainermouseup
 259              * Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
 260              * @param {Ext.view.View} this
 261              * @param {Ext.EventObject} e The raw event object
 262              */
 263             'beforecontainermouseup',
 264 <span id='Ext-view-View-event-beforecontainermouseover'>            /**
 265 </span>             * @event beforecontainermouseover
 266              * Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
 267              * @param {Ext.view.View} this
 268              * @param {Ext.EventObject} e The raw event object
 269              */
 270             'beforecontainermouseover',
 271 <span id='Ext-view-View-event-beforecontainermouseout'>            /**
 272 </span>             * @event beforecontainermouseout
 273              * Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
 274              * @param {Ext.view.View} this
 275              * @param {Ext.EventObject} e The raw event object
 276              */
 277             'beforecontainermouseout',
 278 <span id='Ext-view-View-event-beforecontainerclick'>            /**
 279 </span>             * @event beforecontainerclick
 280              * Fires before the click event on the container is processed. Returns false to cancel the default action.
 281              * @param {Ext.view.View} this
 282              * @param {Ext.EventObject} e The raw event object
 283              */
 284             'beforecontainerclick',
 285 <span id='Ext-view-View-event-beforecontainerdblclick'>            /**
 286 </span>             * @event beforecontainerdblclick
 287              * Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
 288              * @param {Ext.view.View} this
 289              * @param {Ext.EventObject} e The raw event object
 290              */
 291             'beforecontainerdblclick',
 292 <span id='Ext-view-View-event-beforecontainercontextmenu'>            /**
 293 </span>             * @event beforecontainercontextmenu
 294              * Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
 295              * @param {Ext.view.View} this
 296              * @param {Ext.EventObject} e The raw event object
 297              */
 298             'beforecontainercontextmenu',
 299 <span id='Ext-view-View-event-beforecontainerkeydown'>            /**
 300 </span>             * @event beforecontainerkeydown
 301              * Fires before the keydown event on the container is processed. Returns false to cancel the default action.
 302              * @param {Ext.view.View} this
 303              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
 304              */
 305             'beforecontainerkeydown',
 306 <span id='Ext-view-View-event-containermouseup'>            /**
 307 </span>             * @event containermouseup
 308              * Fires when there is a mouse up on the container
 309              * @param {Ext.view.View} this
 310              * @param {Ext.EventObject} e The raw event object
 311              */
 312             'containermouseup',
 313 <span id='Ext-view-View-event-containermouseover'>            /**
 314 </span>             * @event containermouseover
 315              * Fires when you move the mouse over the container.
 316              * @param {Ext.view.View} this
 317              * @param {Ext.EventObject} e The raw event object
 318              */
 319             'containermouseover',
 320 <span id='Ext-view-View-event-containermouseout'>            /**
 321 </span>             * @event containermouseout
 322              * Fires when you move the mouse out of the container.
 323              * @param {Ext.view.View} this
 324              * @param {Ext.EventObject} e The raw event object
 325              */
 326             'containermouseout',
 327 <span id='Ext-view-View-event-containerclick'>            /**
 328 </span>             * @event containerclick
 329              * Fires when the container is clicked.
 330              * @param {Ext.view.View} this
 331              * @param {Ext.EventObject} e The raw event object
 332              */
 333             'containerclick',
 334 <span id='Ext-view-View-event-containerdblclick'>            /**
 335 </span>             * @event containerdblclick
 336              * Fires when the container is double clicked.
 337              * @param {Ext.view.View} this
 338              * @param {Ext.EventObject} e The raw event object
 339              */
 340             'containerdblclick',
 341 <span id='Ext-view-View-event-containercontextmenu'>            /**
 342 </span>             * @event containercontextmenu
 343              * Fires when the container is right clicked.
 344              * @param {Ext.view.View} this
 345              * @param {Ext.EventObject} e The raw event object
 346              */
 347             'containercontextmenu',
 348 <span id='Ext-view-View-event-containerkeydown'>            /**
 349 </span>             * @event containerkeydown
 350              * Fires when a key is pressed while the container is focused, and no item is currently selected.
 351              * @param {Ext.view.View} this
 352              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
 353              */
 354             'containerkeydown',
 355
 356 <span id='Ext-view-View-event-selectionchange'>            /**
 357 </span>             * @event selectionchange
 358              * Fires when the selected nodes change. Relayed event from the underlying selection model.
 359              * @param {Ext.view.View} this
 360              * @param {HTMLElement[]} selections Array of the selected nodes
 361              */
 362             'selectionchange',
 363 <span id='Ext-view-View-event-beforeselect'>            /**
 364 </span>             * @event beforeselect
 365              * Fires before a selection is made. If any handlers return false, the selection is cancelled.
 366              * @param {Ext.view.View} this
 367              * @param {HTMLElement} node The node to be selected
 368              * @param {HTMLElement[]} selections Array of currently selected nodes
 369              */
 370             'beforeselect'
 371         );
 372     },
 373     // private
 374     afterRender: function(){
 375         var me = this,
 376             listeners;
 377
 378         me.callParent();
 379
 380         listeners = {
 381             scope: me,
 382             /*
 383              * We need to make copies of this since some of the events fired here will end up triggering
 384              * a new event to be called and the shared event object will be mutated. In future we should
 385              * investigate if there are any issues with creating a new event object for each event that
 386              * is fired.
 387              */
 388             freezeEvent: true,
 389             click: me.handleEvent,
 390             mousedown: me.handleEvent,
 391             mouseup: me.handleEvent,
 392             dblclick: me.handleEvent,
 393             contextmenu: me.handleEvent,
 394             mouseover: me.handleEvent,
 395             mouseout: me.handleEvent,
 396             keydown: me.handleEvent
 397         };
 398
 399         me.mon(me.getTargetEl(), listeners);
 400
 401         if (me.store) {
 402             me.bindStore(me.store, true);
 403         }
 404     },
 405
 406     handleEvent: function(e) {
 407         if (this.processUIEvent(e) !== false) {
 408             this.processSpecialEvent(e);
 409         }
 410     },
 411
 412     // Private template method
 413     processItemEvent: Ext.emptyFn,
 414     processContainerEvent: Ext.emptyFn,
 415     processSpecialEvent: Ext.emptyFn,
 416
 417     /*
 418      * Returns true if this mouseover/out event is still over the overItem.
 419      */
 420     stillOverItem: function (event, overItem) {
 421         var nowOver;
 422
 423         // There is this weird bug when you hover over the border of a cell it is saying
 424         // the target is the table.
 425         // BrowserBug: IE6 &amp; 7. If me.mouseOverItem has been removed and is no longer
 426         // in the DOM then accessing .offsetParent will throw an &quot;Unspecified error.&quot; exception.
 427         // typeof'ng and checking to make sure the offsetParent is an object will NOT throw
 428         // this hard exception.
 429         if (overItem &amp;&amp; typeof(overItem.offsetParent) === &quot;object&quot;) {
 430             // mouseout : relatedTarget == nowOver, target == wasOver
 431             // mouseover: relatedTarget == wasOver, target == nowOver
 432             nowOver = (event.type == 'mouseout') ? event.getRelatedTarget() : event.getTarget();
 433             return Ext.fly(overItem).contains(nowOver);
 434         }
 435
 436         return false;
 437     },
 438
 439     processUIEvent: function(e) {
 440         var me = this,
 441             item = e.getTarget(me.getItemSelector(), me.getTargetEl()),
 442             map = this.statics().EventMap,
 443             index, record,
 444             type = e.type,
 445             overItem = me.mouseOverItem,
 446             newType;
 447
 448         if (!item) {
 449             if (type == 'mouseover' &amp;&amp; me.stillOverItem(e, overItem)) {
 450                 item = overItem;
 451             }
 452
 453             // Try to get the selected item to handle the keydown event, otherwise we'll just fire a container keydown event
 454             if (type == 'keydown') {
 455                 record = me.getSelectionModel().getLastSelected();
 456                 if (record) {
 457                     item = me.getNode(record);
 458                 }
 459             }
 460         }
 461
 462         if (item) {
 463             index = me.indexOf(item);
 464             if (!record) {
 465                 record = me.getRecord(item);
 466             }
 467
 468             if (me.processItemEvent(record, item, index, e) === false) {
 469                 return false;
 470             }
 471
 472             newType = me.isNewItemEvent(item, e);
 473             if (newType === false) {
 474                 return false;
 475             }
 476
 477             if (
 478                 (me['onBeforeItem' + map[newType]](record, item, index, e) === false) ||
 479                 (me.fireEvent('beforeitem' + newType, me, record, item, index, e) === false) ||
 480                 (me['onItem' + map[newType]](record, item, index, e) === false)
 481             ) {
 482                 return false;
 483             }
 484
 485             me.fireEvent('item' + newType, me, record, item, index, e);
 486         }
 487         else {
 488             if (
 489                 (me.processContainerEvent(e) === false) ||
 490                 (me['onBeforeContainer' + map[type]](e) === false) ||
 491                 (me.fireEvent('beforecontainer' + type, me, e) === false) ||
 492                 (me['onContainer' + map[type]](e) === false)
 493             ) {
 494                 return false;
 495             }
 496
 497             me.fireEvent('container' + type, me, e);
 498         }
 499
 500         return true;
 501     },
 502
 503     isNewItemEvent: function (item, e) {
 504         var me = this,
 505             overItem = me.mouseOverItem,
 506             type = e.type;
 507
 508         switch (type) {
 509             case 'mouseover':
 510                 if (item === overItem) {
 511                     return false;
 512                 }
 513                 me.mouseOverItem = item;
 514                 return 'mouseenter';
 515
 516             case 'mouseout':
 517                 // If the currently mouseovered item contains the mouseover target, it's *NOT* a mouseleave
 518                 if (me.stillOverItem(e, overItem)) {
 519                     return false;
 520                 }
 521                 me.mouseOverItem = null;
 522                 return 'mouseleave';
 523         }
 524         return type;
 525     },
 526
 527     // private
 528     onItemMouseEnter: function(record, item, index, e) {
 529         if (this.trackOver) {
 530             this.highlightItem(item);
 531         }
 532     },
 533
 534     // private
 535     onItemMouseLeave : function(record, item, index, e) {
 536         if (this.trackOver) {
 537             this.clearHighlight();
 538         }
 539     },
 540
 541     // @private, template methods
 542     onItemMouseDown: Ext.emptyFn,
 543     onItemMouseUp: Ext.emptyFn,
 544     onItemFocus: Ext.emptyFn,
 545     onItemClick: Ext.emptyFn,
 546     onItemDblClick: Ext.emptyFn,
 547     onItemContextMenu: Ext.emptyFn,
 548     onItemKeyDown: Ext.emptyFn,
 549     onBeforeItemMouseDown: Ext.emptyFn,
 550     onBeforeItemMouseUp: Ext.emptyFn,
 551     onBeforeItemFocus: Ext.emptyFn,
 552     onBeforeItemMouseEnter: Ext.emptyFn,
 553     onBeforeItemMouseLeave: Ext.emptyFn,
 554     onBeforeItemClick: Ext.emptyFn,
 555     onBeforeItemDblClick: Ext.emptyFn,
 556     onBeforeItemContextMenu: Ext.emptyFn,
 557     onBeforeItemKeyDown: Ext.emptyFn,
 558
 559     // @private, template methods
 560     onContainerMouseDown: Ext.emptyFn,
 561     onContainerMouseUp: Ext.emptyFn,
 562     onContainerMouseOver: Ext.emptyFn,
 563     onContainerMouseOut: Ext.emptyFn,
 564     onContainerClick: Ext.emptyFn,
 565     onContainerDblClick: Ext.emptyFn,
 566     onContainerContextMenu: Ext.emptyFn,
 567     onContainerKeyDown: Ext.emptyFn,
 568     onBeforeContainerMouseDown: Ext.emptyFn,
 569     onBeforeContainerMouseUp: Ext.emptyFn,
 570     onBeforeContainerMouseOver: Ext.emptyFn,
 571     onBeforeContainerMouseOut: Ext.emptyFn,
 572     onBeforeContainerClick: Ext.emptyFn,
 573     onBeforeContainerDblClick: Ext.emptyFn,
 574     onBeforeContainerContextMenu: Ext.emptyFn,
 575     onBeforeContainerKeyDown: Ext.emptyFn,
 576
 577 <span id='Ext-view-View-method-highlightItem'>    /**
 578 </span>     * Highlights a given item in the DataView. This is called by the mouseover handler if {@link #overItemCls}
 579      * and {@link #trackOver} are configured, but can also be called manually by other code, for instance to
 580      * handle stepping through the list via keyboard navigation.
 581      * @param {HTMLElement} item The item to highlight
 582      */
 583     highlightItem: function(item) {
 584         var me = this;
 585         me.clearHighlight();
 586         me.highlightedItem = item;
 587         Ext.fly(item).addCls(me.overItemCls);
 588     },
 589
 590 <span id='Ext-view-View-method-clearHighlight'>    /**
 591 </span>     * Un-highlights the currently highlighted item, if any.
 592      */
 593     clearHighlight: function() {
 594         var me = this,
 595             highlighted = me.highlightedItem;
 596
 597         if (highlighted) {
 598             Ext.fly(highlighted).removeCls(me.overItemCls);
 599             delete me.highlightedItem;
 600         }
 601     },
 602
 603     refresh: function() {
 604         var me = this;
 605         me.clearHighlight();
 606         me.callParent(arguments);
 607         if (!me.isFixedHeight()) {
 608             me.doComponentLayout();
 609         }
 610     }
 611 });</pre>
 612 </body>
 613 </html>