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="../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-grid-View'>/**
  19 </span> * @class Ext.grid.View
  20  * @extends Ext.view.Table
  21  *
  22  * The grid View class provides extra {@link Ext.grid.Panel} specific functionality to the
  23  * {@link Ext.view.Table}. In general, this class is not instanced directly, instead a viewConfig
  24  * option is passed to the grid:
  25  *
  26  *     Ext.create('Ext.grid.Panel', {
  27  *         // other options
  28  *         viewConfig: {
  29  *             stripeRows: false
  30  *         }
  31  *     });
  32  *
  33  * ## Drag Drop
  34  *
  35  * Drag and drop functionality can be achieved in the grid by attaching a {@link Ext.grid.plugin.DragDrop} plugin
  36  * when creating the view.
  37  *
  38  *     Ext.create('Ext.grid.Panel', {
  39  *         // other options
  40  *         viewConfig: {
  41  *             plugins: {
  42  *                 ddGroup: 'people-group',
  43  *                 ptype: 'gridviewdragdrop',
  44  *                 enableDrop: false
  45  *             }
  46  *         }
  47  *     });
  48  */
  49 Ext.define('Ext.grid.View', {
  50     extend: 'Ext.view.Table',
  51     alias: 'widget.gridview',
  52
  53 <span id='Ext-grid-View-cfg-stripeRows'>    /**
  54 </span>     * @cfg {Boolean} stripeRows &lt;tt&gt;true&lt;/tt&gt; to stripe the rows. Default is &lt;tt&gt;true&lt;/tt&gt;.
  55      * &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
  56      * the grid. A default CSS rule is provided which sets a background color, but you can override this
  57      * with a rule which either overrides the &lt;b&gt;background-color&lt;/b&gt; style using the '!important'
  58      * modifier, or which uses a CSS selector of higher specificity.&lt;/p&gt;
  59      */
  60     stripeRows: true,
  61
  62     invalidateScrollerOnRefresh: true,
  63
  64 <span id='Ext-grid-View-method-scrollToTop'>    /**
  65 </span>     * Scroll the GridView to the top by scrolling the scroller.
  66      * @private
  67      */
  68     scrollToTop : function(){
  69         if (this.rendered) {
  70             var section = this.ownerCt,
  71                 verticalScroller = section.verticalScroller;
  72
  73             if (verticalScroller) {
  74                 verticalScroller.scrollToTop();
  75             }
  76         }
  77     },
  78
  79     // after adding a row stripe rows from then on
  80     onAdd: function(ds, records, index) {
  81         this.callParent(arguments);
  82         this.doStripeRows(index);
  83     },
  84
  85     // after removing a row stripe rows from then on
  86     onRemove: function(ds, records, index) {
  87         this.callParent(arguments);
  88         this.doStripeRows(index);
  89     },
  90
  91     onUpdate: function(ds, record, operation) {
  92         var index = ds.indexOf(record);
  93         this.callParent(arguments);
  94         this.doStripeRows(index, index);
  95     },
  96
  97 <span id='Ext-grid-View-method-doStripeRows'>    /**
  98 </span>     * Stripe rows from a particular row index
  99      * @param {Number} startRow
 100      * @param {Number} endRow (Optional) argument specifying the last row to process. By default process up to the last row.
 101      * @private
 102      */
 103     doStripeRows: function(startRow, endRow) {
 104         // ensure stripeRows configuration is turned on
 105         if (this.stripeRows) {
 106             var rows   = this.getNodes(startRow, endRow),
 107                 rowsLn = rows.length,
 108                 i      = 0,
 109                 row;
 110
 111             for (; i &lt; rowsLn; i++) {
 112                 row = rows[i];
 113                 // Remove prior applied row classes.
 114                 row.className = row.className.replace(this.rowClsRe, ' ');
 115                 startRow++;
 116                 // Every odd row will get an additional cls
 117                 if (startRow % 2 === 0) {
 118                     row.className += (' ' + this.altRowCls);
 119                 }
 120             }
 121         }
 122     },
 123
 124     refresh: function(firstPass) {
 125         this.callParent(arguments);
 126         this.doStripeRows(0);
 127         // TODO: Remove gridpanel dependency
 128         var g = this.up('gridpanel');
 129         if (g &amp;&amp; this.invalidateScrollerOnRefresh) {
 130             g.invalidateScroller();
 131         }
 132     }
 133 });
 134 </pre>
 135 </body>
 136 </html>