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