src/grid/View.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.grid.View
  17  * @extends Ext.view.Table
  18  *
  19  * The grid View class provides extra {@link Ext.grid.Panel} specific functionality to the
  20  * {@link Ext.view.Table}. In general, this class is not instanced directly, instead a viewConfig
  21  * option is passed to the grid:
  22  *
  23  *     Ext.create('Ext.grid.Panel', {
  24  *         // other options
  25  *         viewConfig: {
  26  *             stripeRows: false
  27  *         }
  28  *     });
  29  *
  30  * ## Drag Drop
  31  *
  32  * Drag and drop functionality can be achieved in the grid by attaching a {@link Ext.grid.plugin.DragDrop} plugin
  33  * when creating the view.
  34  *
  35  *     Ext.create('Ext.grid.Panel', {
  36  *         // other options
  37  *         viewConfig: {
  38  *             plugins: {
  39  *                 ddGroup: 'people-group',
  40  *                 ptype: 'gridviewdragdrop',
  41  *                 enableDrop: false
  42  *             }
  43  *         }
  44  *     });
  45  */
  46 Ext.define('Ext.grid.View', {
  47     extend: 'Ext.view.Table',
  48     alias: 'widget.gridview',
  49
  50     /**
  51      * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>true</tt>.
  52      * <p>This causes the CSS class <tt><b>x-grid-row-alt</b></tt> to be added to alternate rows of
  53      * the grid. A default CSS rule is provided which sets a background color, but you can override this
  54      * with a rule which either overrides the <b>background-color</b> style using the '!important'
  55      * modifier, or which uses a CSS selector of higher specificity.</p>
  56      */
  57     stripeRows: true,
  58
  59     invalidateScrollerOnRefresh: true,
  60
  61     /**
  62      * Scroll the GridView to the top by scrolling the scroller.
  63      * @private
  64      */
  65     scrollToTop : function(){
  66         if (this.rendered) {
  67             var section = this.ownerCt,
  68                 verticalScroller = section.verticalScroller;
  69
  70             if (verticalScroller) {
  71                 verticalScroller.scrollToTop();
  72             }
  73         }
  74     },
  75
  76     // after adding a row stripe rows from then on
  77     onAdd: function(ds, records, index) {
  78         this.callParent(arguments);
  79         this.doStripeRows(index);
  80     },
  81
  82     // after removing a row stripe rows from then on
  83     onRemove: function(ds, records, index) {
  84         this.callParent(arguments);
  85         this.doStripeRows(index);
  86     },
  87
  88     onUpdate: function(ds, record, operation) {
  89         var index = ds.indexOf(record);
  90         this.callParent(arguments);
  91         this.doStripeRows(index, index);
  92     },
  93
  94     /**
  95      * Stripe rows from a particular row index
  96      * @param {Number} startRow
  97      * @param {Number} endRow (Optional) argument specifying the last row to process. By default process up to the last row.
  98      * @private
  99      */
 100     doStripeRows: function(startRow, endRow) {
 101         // ensure stripeRows configuration is turned on
 102         if (this.stripeRows) {
 103             var rows   = this.getNodes(startRow, endRow),
 104                 rowsLn = rows.length,
 105                 i      = 0,
 106                 row;
 107
 108             for (; i < rowsLn; i++) {
 109                 row = rows[i];
 110                 // Remove prior applied row classes.
 111                 row.className = row.className.replace(this.rowClsRe, ' ');
 112                 startRow++;
 113                 // Every odd row will get an additional cls
 114                 if (startRow % 2 === 0) {
 115                     row.className += (' ' + this.altRowCls);
 116                 }
 117             }
 118         }
 119     },
 120
 121     refresh: function(firstPass) {
 122         this.callParent(arguments);
 123         this.doStripeRows(0);
 124         // TODO: Remove gridpanel dependency
 125         var g = this.up('gridpanel');
 126         if (g && this.invalidateScrollerOnRefresh) {
 127             g.invalidateScroller();
 128         }
 129     }
 130 });
 131