Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / View.html
index 7e653a9..8caf46c 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-view-View'>/**
-</span> * @class Ext.view.View
- * @extends Ext.view.AbstractView
+  <pre class="prettyprint lang-js"><span id='Ext-grid-View'>/**
+</span> * @class Ext.grid.View
+ * @extends Ext.view.Table
  *
- * A mechanism for displaying data using custom layout templates and formatting. DataView uses an {@link Ext.XTemplate}
- * as its internal templating mechanism, and is bound to an {@link Ext.data.Store}
- * so that as the data in the store changes the view is automatically updated to reflect the changes.  The view also
- * provides built-in behavior for many common events that can occur for its contained items including click, doubleclick,
- * mouseover, mouseout, etc. as well as a built-in selection model. &lt;b&gt;In order to use these features, an {@link #itemSelector}
- * config must be provided for the DataView to determine what nodes it will be working with.&lt;/b&gt;
+ * The grid View class provides extra {@link Ext.grid.Panel} specific functionality to the
+ * {@link Ext.view.Table}. In general, this class is not instanced directly, instead a viewConfig
+ * option is passed to the grid:
  *
- * The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
- *
- * {@img Ext.DataView/Ext.DataView.png Ext.DataView component}
- *
- *     Ext.regModel('Image', {
- *         Fields: [
- *             {name:'src', type:'string'},
- *             {name:'caption', type:'string'}
- *         ]
+ *     Ext.create('Ext.grid.Panel', {
+ *         // other options
+ *         viewConfig: {
+ *             stripeRows: false
+ *         }
  *     });
  *
- *     Ext.create('Ext.data.Store', {
- *         id:'imagesStore',
- *         model: 'Image',
- *         data: [
- *             {src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing &amp; Charts'},
- *             {src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
- *             {src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
- *             {src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
- *         ]
- *     });
+ * ## Drag Drop
  *
- *     var imageTpl = new Ext.XTemplate(
- *         '&amp;lt;tpl for=&quot;.&quot;&amp;gt;',
- *             '&amp;lt;div style=&quot;thumb-wrap&quot;&amp;gt;',
- *               '&amp;lt;img src=&quot;{src}&quot; /&amp;gt;',
- *               '&amp;lt;br/&amp;gt;&amp;lt;span&amp;gt;{caption}&amp;lt;/span&amp;gt;',
- *             '&amp;lt;/div&amp;gt;',
- *         '&amp;lt;/tpl&amp;gt;'
- *     );
+ * Drag and drop functionality can be achieved in the grid by attaching a {@link Ext.grid.plugin.DragDrop} plugin
+ * when creating the view.
  *
- *     Ext.create('Ext.DataView', {
- *         store: Ext.data.StoreManager.lookup('imagesStore'),
- *         tpl: imageTpl,
- *         itemSelector: 'div.thumb-wrap',
- *         emptyText: 'No images available',
- *         renderTo: Ext.getBody()
+ *     Ext.create('Ext.grid.Panel', {
+ *         // other options
+ *         viewConfig: {
+ *             plugins: {
+ *                 ddGroup: 'people-group',
+ *                 ptype: 'gridviewdragdrop',
+ *                 enableDrop: false
+ *             }
+ *         }
  *     });
  */
-Ext.define('Ext.view.View', {
-    extend: 'Ext.view.AbstractView',
-    alternateClassName: 'Ext.DataView',
-    alias: 'widget.dataview',
-
-    inheritableStatics: {
-        EventMap: {
-            mousedown: 'MouseDown',
-            mouseup: 'MouseUp',
-            click: 'Click',
-            dblclick: 'DblClick',
-            contextmenu: 'ContextMenu',
-            mouseover: 'MouseOver',
-            mouseout: 'MouseOut',
-            mouseenter: 'MouseEnter',
-            mouseleave: 'MouseLeave',
-            keydown: 'KeyDown',
-            focus: 'Focus'
-        }
-    },
-
-    addCmpEvents: function() {
-        this.addEvents(
-<span id='Ext-view-View-event-beforeitemmousedown'>            /**
-</span>             * @event beforeitemmousedown
-             * Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforeitemmousedown',
-<span id='Ext-view-View-event-beforeitemmouseup'>            /**
-</span>             * @event beforeitemmouseup
-             * Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforeitemmouseup',
-<span id='Ext-view-View-event-beforeitemmouseenter'>            /**
-</span>             * @event beforeitemmouseenter
-             * Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforeitemmouseenter',
-<span id='Ext-view-View-event-beforeitemmouseleave'>            /**
-</span>             * @event beforeitemmouseleave
-             * Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforeitemmouseleave',
-<span id='Ext-view-View-event-beforeitemclick'>            /**
-</span>             * @event beforeitemclick
-             * Fires before the click event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforeitemclick',
-<span id='Ext-view-View-event-beforeitemdblclick'>            /**
-</span>             * @event beforeitemdblclick
-             * Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforeitemdblclick',
-<span id='Ext-view-View-event-beforeitemcontextmenu'>            /**
-</span>             * @event beforeitemcontextmenu
-             * Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforeitemcontextmenu',
-<span id='Ext-view-View-event-beforeitemkeydown'>            /**
-</span>             * @event beforeitemkeydown
-             * Fires before the keydown event on an item is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
-             */
-            'beforeitemkeydown',
-<span id='Ext-view-View-event-itemmousedown'>            /**
-</span>             * @event itemmousedown
-             * Fires when there is a mouse down on an item
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'itemmousedown',
-<span id='Ext-view-View-event-itemmouseup'>            /**
-</span>             * @event itemmouseup
-             * Fires when there is a mouse up on an item
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'itemmouseup',
-<span id='Ext-view-View-event-itemmouseenter'>            /**
-</span>             * @event itemmouseenter
-             * Fires when the mouse enters an item.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'itemmouseenter',
-<span id='Ext-view-View-event-itemmouseleave'>            /**
-</span>             * @event itemmouseleave
-             * Fires when the mouse leaves an item.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'itemmouseleave',
-<span id='Ext-view-View-event-itemclick'>            /**
-</span>             * @event itemclick
-             * Fires when an item is clicked.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'itemclick',
-<span id='Ext-view-View-event-itemdblclick'>            /**
-</span>             * @event itemdblclick
-             * Fires when an item is double clicked.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'itemdblclick',
-<span id='Ext-view-View-event-itemcontextmenu'>            /**
-</span>             * @event itemcontextmenu
-             * Fires when an item is right clicked.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'itemcontextmenu',
-<span id='Ext-view-View-event-itemkeydown'>            /**
-</span>             * @event itemkeydown
-             * Fires when a key is pressed while an item is currently selected.
-             * @param {Ext.view.View} this
-             * @param {Ext.data.Model} record The record that belongs to the item
-             * @param {HTMLElement} item The item's element
-             * @param {Number} index The item's index
-             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
-             */
-            'itemkeydown',
-<span id='Ext-view-View-event-beforecontainermousedown'>            /**
-</span>             * @event beforecontainermousedown
-             * Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforecontainermousedown',
-<span id='Ext-view-View-event-beforecontainermouseup'>            /**
-</span>             * @event beforecontainermouseup
-             * Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforecontainermouseup',
-<span id='Ext-view-View-event-beforecontainermouseover'>            /**
-</span>             * @event beforecontainermouseover
-             * Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforecontainermouseover',
-<span id='Ext-view-View-event-beforecontainermouseout'>            /**
-</span>             * @event beforecontainermouseout
-             * Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforecontainermouseout',
-<span id='Ext-view-View-event-beforecontainerclick'>            /**
-</span>             * @event beforecontainerclick
-             * Fires before the click event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforecontainerclick',
-<span id='Ext-view-View-event-beforecontainerdblclick'>            /**
-</span>             * @event beforecontainerdblclick
-             * Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforecontainerdblclick',
-<span id='Ext-view-View-event-beforecontainercontextmenu'>            /**
-</span>             * @event beforecontainercontextmenu
-             * Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'beforecontainercontextmenu',
-<span id='Ext-view-View-event-beforecontainerkeydown'>            /**
-</span>             * @event beforecontainerkeydown
-             * Fires before the keydown event on the container is processed. Returns false to cancel the default action.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
-             */
-            'beforecontainerkeydown',
-<span id='Ext-view-View-event-containermouseup'>            /**
-</span>             * @event containermouseup
-             * Fires when there is a mouse up on the container
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'containermouseup',
-<span id='Ext-view-View-event-containermouseover'>            /**
-</span>             * @event containermouseover
-             * Fires when you move the mouse over the container.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'containermouseover',
-<span id='Ext-view-View-event-containermouseout'>            /**
-</span>             * @event containermouseout
-             * Fires when you move the mouse out of the container.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'containermouseout',
-<span id='Ext-view-View-event-containerclick'>            /**
-</span>             * @event containerclick
-             * Fires when the container is clicked.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'containerclick',
-<span id='Ext-view-View-event-containerdblclick'>            /**
-</span>             * @event containerdblclick
-             * Fires when the container is double clicked.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'containerdblclick',
-<span id='Ext-view-View-event-containercontextmenu'>            /**
-</span>             * @event containercontextmenu
-             * Fires when the container is right clicked.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object
-             */
-            'containercontextmenu',
-<span id='Ext-view-View-event-containerkeydown'>            /**
-</span>             * @event containerkeydown
-             * Fires when a key is pressed while the container is focused, and no item is currently selected.
-             * @param {Ext.view.View} this
-             * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
-             */
-            'containerkeydown',
-
-<span id='Ext-view-View-event-selectionchange'>            /**
-</span>             * @event selectionchange
-             * Fires when the selected nodes change. Relayed event from the underlying selection model.
-             * @param {Ext.view.View} this
-             * @param {Array} selections Array of the selected nodes
-             */
-            'selectionchange',
-<span id='Ext-view-View-event-beforeselect'>            /**
-</span>             * @event beforeselect
-             * Fires before a selection is made. If any handlers return false, the selection is cancelled.
-             * @param {Ext.view.View} this
-             * @param {HTMLElement} node The node to be selected
-             * @param {Array} selections Array of currently selected nodes
-             */
-            'beforeselect'
-        );
-    },
-    // private
-    afterRender: function(){
-        var me = this,
-            listeners;
-
-        me.callParent();
-
-        listeners = {
-            scope: me,
-            /*
-             * We need to make copies of this since some of the events fired here will end up triggering
-             * a new event to be called and the shared event object will be mutated. In future we should
-             * investigate if there are any issues with creating a new event object for each event that
-             * is fired.
-             */
-            freezeEvent: true,
-            click: me.handleEvent,
-            mousedown: me.handleEvent,
-            mouseup: me.handleEvent,
-            dblclick: me.handleEvent,
-            contextmenu: me.handleEvent,
-            mouseover: me.handleEvent,
-            mouseout: me.handleEvent,
-            keydown: me.handleEvent
-        };
-
-        me.mon(me.getTargetEl(), listeners);
-
-        if (me.store) {
-            me.bindStore(me.store, true);
-        }
-    },
-
-    handleEvent: function(e) {
-        if (this.processUIEvent(e) !== false) {
-            this.processSpecialEvent(e);
-        }
-    },
-
-    // Private template method
-    processItemEvent: Ext.emptyFn,
-    processContainerEvent: Ext.emptyFn,
-    processSpecialEvent: Ext.emptyFn,
-
-    /*
-     * Returns true if this mouseover/out event is still over the overItem.
+Ext.define('Ext.grid.View', {
+    extend: 'Ext.view.Table',
+    alias: 'widget.gridview',
+
+<span id='Ext-grid-View-cfg-stripeRows'>    /**
+</span>     * @cfg {Boolean} stripeRows &lt;tt&gt;true&lt;/tt&gt; to stripe the rows. Default is &lt;tt&gt;true&lt;/tt&gt;.
+     * &lt;p&gt;This causes the CSS class &lt;tt&gt;&lt;b&gt;x-grid-row-alt&lt;/b&gt;&lt;/tt&gt; to be added to alternate rows of
+     * the grid. A default CSS rule is provided which sets a background color, but you can override this
+     * with a rule which either overrides the &lt;b&gt;background-color&lt;/b&gt; style using the '!important'
+     * modifier, or which uses a CSS selector of higher specificity.&lt;/p&gt;
      */
-    stillOverItem: function (event, overItem) {
-        var nowOver;
-
-        // There is this weird bug when you hover over the border of a cell it is saying
-        // the target is the table.
-        // BrowserBug: IE6 &amp; 7. If me.mouseOverItem has been removed and is no longer
-        // in the DOM then accessing .offsetParent will throw an &quot;Unspecified error.&quot; exception.
-        // typeof'ng and checking to make sure the offsetParent is an object will NOT throw
-        // this hard exception.
-        if (overItem &amp;&amp; typeof(overItem.offsetParent) === &quot;object&quot;) {
-            // mouseout : relatedTarget == nowOver, target == wasOver
-            // mouseover: relatedTarget == wasOver, target == nowOver
-            nowOver = (event.type == 'mouseout') ? event.getRelatedTarget() : event.getTarget();
-            return Ext.fly(overItem).contains(nowOver);
-        }
-
-        return false;
-    },
-
-    processUIEvent: function(e) {
-        var me = this,
-            item = e.getTarget(me.getItemSelector(), me.getTargetEl()),
-            map = this.statics().EventMap,
-            index, record,
-            type = e.type,
-            overItem = me.mouseOverItem,
-            newType;
-
-        if (!item) {
-            if (type == 'mouseover' &amp;&amp; me.stillOverItem(e, overItem)) {
-                item = overItem;
-            }
-
-            // Try to get the selected item to handle the keydown event, otherwise we'll just fire a container keydown event
-            if (type == 'keydown') {
-                record = me.getSelectionModel().getLastSelected();
-                if (record) {
-                    item = me.getNode(record);
-                }
-            }
-        }
-
-        if (item) {
-            index = me.indexOf(item);
-            if (!record) {
-                record = me.getRecord(item);
-            }
-
-            if (me.processItemEvent(record, item, index, e) === false) {
-                return false;
-            }
+    stripeRows: true,
 
-            newType = me.isNewItemEvent(item, e);
-            if (newType === false) {
-                return false;
-            }
+    invalidateScrollerOnRefresh: true,
 
-            if (
-                (me['onBeforeItem' + map[newType]](record, item, index, e) === false) ||
-                (me.fireEvent('beforeitem' + newType, me, record, item, index, e) === false) ||
-                (me['onItem' + map[newType]](record, item, index, e) === false)
-            ) {
-                return false;
-            }
+<span id='Ext-grid-View-method-scrollToTop'>    /**
+</span>     * Scroll the GridView to the top by scrolling the scroller.
+     * @private
+     */
+    scrollToTop : function(){
+        if (this.rendered) {
+            var section = this.ownerCt,
+                verticalScroller = section.verticalScroller;
 
-            me.fireEvent('item' + newType, me, record, item, index, e);
-        }
-        else {
-            if (
-                (me.processContainerEvent(e) === false) ||
-                (me['onBeforeContainer' + map[type]](e) === false) ||
-                (me.fireEvent('beforecontainer' + type, me, e) === false) ||
-                (me['onContainer' + map[type]](e) === false)
-            ) {
-                return false;
+            if (verticalScroller) {
+                verticalScroller.scrollToTop();
             }
-
-            me.fireEvent('container' + type, me, e);
-        }
-
-        return true;
-    },
-
-    isNewItemEvent: function (item, e) {
-        var me = this,
-            overItem = me.mouseOverItem,
-            type = e.type;
-
-        switch (type) {
-            case 'mouseover':
-                if (item === overItem) {
-                    return false;
-                }
-                me.mouseOverItem = item;
-                return 'mouseenter';
-
-            case 'mouseout':
-                // If the currently mouseovered item contains the mouseover target, it's *NOT* a mouseleave
-                if (me.stillOverItem(e, overItem)) {
-                    return false;
-                }
-                me.mouseOverItem = null;
-                return 'mouseleave';
         }
-        return type;
     },
 
-    // private
-    onItemMouseEnter: function(record, item, index, e) {
-        if (this.trackOver) {
-            this.highlightItem(item);
-        }
+    // after adding a row stripe rows from then on
+    onAdd: function(ds, records, index) {
+        this.callParent(arguments);
+        this.doStripeRows(index);
     },
 
-    // private
-    onItemMouseLeave : function(record, item, index, e) {
-        if (this.trackOver) {
-            this.clearHighlight();
-        }
+    // after removing a row stripe rows from then on
+    onRemove: function(ds, records, index) {
+        this.callParent(arguments);
+        this.doStripeRows(index);
     },
 
-    // @private, template methods
-    onItemMouseDown: Ext.emptyFn,
-    onItemMouseUp: Ext.emptyFn,
-    onItemFocus: Ext.emptyFn,
-    onItemClick: Ext.emptyFn,
-    onItemDblClick: Ext.emptyFn,
-    onItemContextMenu: Ext.emptyFn,
-    onItemKeyDown: Ext.emptyFn,
-    onBeforeItemMouseDown: Ext.emptyFn,
-    onBeforeItemMouseUp: Ext.emptyFn,
-    onBeforeItemFocus: Ext.emptyFn,
-    onBeforeItemMouseEnter: Ext.emptyFn,
-    onBeforeItemMouseLeave: Ext.emptyFn,
-    onBeforeItemClick: Ext.emptyFn,
-    onBeforeItemDblClick: Ext.emptyFn,
-    onBeforeItemContextMenu: Ext.emptyFn,
-    onBeforeItemKeyDown: Ext.emptyFn,
-
-    // @private, template methods
-    onContainerMouseDown: Ext.emptyFn,
-    onContainerMouseUp: Ext.emptyFn,
-    onContainerMouseOver: Ext.emptyFn,
-    onContainerMouseOut: Ext.emptyFn,
-    onContainerClick: Ext.emptyFn,
-    onContainerDblClick: Ext.emptyFn,
-    onContainerContextMenu: Ext.emptyFn,
-    onContainerKeyDown: Ext.emptyFn,
-    onBeforeContainerMouseDown: Ext.emptyFn,
-    onBeforeContainerMouseUp: Ext.emptyFn,
-    onBeforeContainerMouseOver: Ext.emptyFn,
-    onBeforeContainerMouseOut: Ext.emptyFn,
-    onBeforeContainerClick: Ext.emptyFn,
-    onBeforeContainerDblClick: Ext.emptyFn,
-    onBeforeContainerContextMenu: Ext.emptyFn,
-    onBeforeContainerKeyDown: Ext.emptyFn,
-
-<span id='Ext-view-View-method-highlightItem'>    /**
-</span>     * Highlight a given item in the DataView. This is called by the mouseover handler if {@link #overItemCls}
-     * and {@link #trackOver} are configured, but can also be called manually by other code, for instance to
-     * handle stepping through the list via keyboard navigation.
-     * @param {HTMLElement} item The item to highlight
-     */
-    highlightItem: function(item) {
-        var me = this;
-        me.clearHighlight();
-        me.highlightedItem = item;
-        Ext.fly(item).addCls(me.overItemCls);
+    onUpdate: function(ds, record, operation) {
+        var index = ds.indexOf(record);
+        this.callParent(arguments);
+        this.doStripeRows(index, index);
     },
 
-<span id='Ext-view-View-method-clearHighlight'>    /**
-</span>     * Un-highlight the currently highlighted item, if any.
+<span id='Ext-grid-View-method-doStripeRows'>    /**
+</span>     * Stripe rows from a particular row index
+     * @param {Number} startRow
+     * @param {Number} endRow (Optional) argument specifying the last row to process. By default process up to the last row.
+     * @private
      */
-    clearHighlight: function() {
-        var me = this,
-            highlighted = me.highlightedItem;
-
-        if (highlighted) {
-            Ext.fly(highlighted).removeCls(me.overItemCls);
-            delete me.highlightedItem;
+    doStripeRows: function(startRow, endRow) {
+        // ensure stripeRows configuration is turned on
+        if (this.stripeRows) {
+            var rows   = this.getNodes(startRow, endRow),
+                rowsLn = rows.length,
+                i      = 0,
+                row;
+
+            for (; i &lt; rowsLn; i++) {
+                row = rows[i];
+                // Remove prior applied row classes.
+                row.className = row.className.replace(this.rowClsRe, ' ');
+                startRow++;
+                // Every odd row will get an additional cls
+                if (startRow % 2 === 0) {
+                    row.className += (' ' + this.altRowCls);
+                }
+            }
         }
     },
 
-    refresh: function() {
-        var me = this;
-        me.clearHighlight();
-        me.callParent(arguments);
-        if (!me.isFixedHeight()) {
-            me.doComponentLayout();
+    refresh: function(firstPass) {
+        this.callParent(arguments);
+        this.doStripeRows(0);
+        // TODO: Remove gridpanel dependency
+        var g = this.up('gridpanel');
+        if (g &amp;&amp; this.invalidateScrollerOnRefresh) {
+            g.invalidateScroller();
         }
     }
-});</pre>
+});
+</pre>
 </body>
 </html>