Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / View.html
index c83ae34..8caf46c 100644 (file)
@@ -1,51 +1,67 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.View'>/**
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <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 type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-grid-View'>/**
 </span> * @class Ext.grid.View
  * @extends Ext.view.Table
-
-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:
-
-    Ext.create('Ext.grid.Panel', {
-        // other options
-        viewConfig: {
-            stripeRows: false
-        }
-    });
-    
-__Drag Drop__
-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.grid.Panel', {
-        // other options
-        viewConfig: {
-            plugins: {
-                ddGroup: 'people-group',
-                ptype: 'gridviewdragdrop',
-                enableDrop: false
-            }
-        }
-    });
-
- * @markdown
+ *
+ * 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:
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         // other options
+ *         viewConfig: {
+ *             stripeRows: false
+ *         }
+ *     });
+ *
+ * ## Drag Drop
+ *
+ * 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.grid.Panel', {
+ *         // other options
+ *         viewConfig: {
+ *             plugins: {
+ *                 ddGroup: 'people-group',
+ *                 ptype: 'gridviewdragdrop',
+ *                 enableDrop: false
+ *             }
+ *         }
+ *     });
  */
 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;false&lt;/tt&gt;.
+<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;
      */
     stripeRows: true,
-    
+
     invalidateScrollerOnRefresh: true,
-    
-<span id='Ext-grid.View-method-scrollToTop'>    /**
+
+<span id='Ext-grid-View-method-scrollToTop'>    /**
 </span>     * Scroll the GridView to the top by scrolling the scroller.
      * @private
      */
@@ -53,7 +69,7 @@ Ext.define('Ext.grid.View', {
         if (this.rendered) {
             var section = this.ownerCt,
                 verticalScroller = section.verticalScroller;
-                
+
             if (verticalScroller) {
                 verticalScroller.scrollToTop();
             }
@@ -65,38 +81,46 @@ Ext.define('Ext.grid.View', {
         this.callParent(arguments);
         this.doStripeRows(index);
     },
-    
+
     // after removing a row stripe rows from then on
     onRemove: function(ds, records, index) {
         this.callParent(arguments);
         this.doStripeRows(index);
     },
-    
-<span id='Ext-grid.View-method-doStripeRows'>    /**
+
+    onUpdate: function(ds, record, operation) {
+        var index = ds.indexOf(record);
+        this.callParent(arguments);
+        this.doStripeRows(index, index);
+    },
+
+<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
      */
-    doStripeRows: function(startRow) {
+    doStripeRows: function(startRow, endRow) {
         // ensure stripeRows configuration is turned on
         if (this.stripeRows) {
-            var rows   = this.getNodes(startRow),
+            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 (i % 2 === 1) {
+                if (startRow % 2 === 0) {
                     row.className += (' ' + this.altRowCls);
                 }
             }
         }
     },
-    
+
     refresh: function(firstPass) {
         this.callParent(arguments);
         this.doStripeRows(0);
@@ -107,4 +131,6 @@ Ext.define('Ext.grid.View', {
         }
     }
 });
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>