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