Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / 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>