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