Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / BufferView.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">Ext.ns('Ext.ux.grid');
9
10 <div id="cls-Ext.ux.grid.BufferView"></div>/**
11  * @class Ext.ux.grid.BufferView
12  * @extends Ext.grid.GridView
13  * A custom GridView which renders rows on an as-needed basis.
14  */
15 Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
16         <div id="cfg-Ext.ux.grid.BufferView-rowHeight"></div>/**
17          * @cfg {Number} rowHeight
18          * The height of a row in the grid.
19          */
20         rowHeight: 19,
21
22         <div id="cfg-Ext.ux.grid.BufferView-borderHeight"></div>/**
23          * @cfg {Number} borderHeight
24          * The combined height of border-top and border-bottom of a row.
25          */
26         borderHeight: 2,
27
28         <div id="cfg-Ext.ux.grid.BufferView-scrollDelay"></div>/**
29          * @cfg {Boolean/Number} scrollDelay
30          * The number of milliseconds before rendering rows out of the visible
31          * viewing area. Defaults to 100. Rows will render immediately with a config
32          * of false.
33          */
34         scrollDelay: 100,
35
36         <div id="cfg-Ext.ux.grid.BufferView-cacheSize"></div>/**
37          * @cfg {Number} cacheSize
38          * The number of rows to look forward and backwards from the currently viewable
39          * area.  The cache applies only to rows that have been rendered already.
40          */
41         cacheSize: 20,
42
43         <div id="cfg-Ext.ux.grid.BufferView-cleanDelay"></div>/**
44          * @cfg {Number} cleanDelay
45          * The number of milliseconds to buffer cleaning of extra rows not in the
46          * cache.
47          */
48         cleanDelay: 500,
49
50         initTemplates : function(){
51                 Ext.ux.grid.BufferView.superclass.initTemplates.call(this);
52                 var ts = this.templates;
53                 // empty div to act as a place holder for a row
54                 ts.rowHolder = new Ext.Template(
55                         '<div class="x-grid3-row {alt}" style="{tstyle}"></div>'
56                 );
57                 ts.rowHolder.disableFormats = true;
58                 ts.rowHolder.compile();
59
60                 ts.rowBody = new Ext.Template(
61                         '<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
62                         '<tbody><tr>{cells}</tr>',
63                         (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
64                         '</tbody></table>'
65                 );
66                 ts.rowBody.disableFormats = true;
67                 ts.rowBody.compile();
68         },
69
70         getStyleRowHeight : function(){
71                 return Ext.isBorderBox ? (this.rowHeight + this.borderHeight) : this.rowHeight;
72         },
73
74         getCalculatedRowHeight : function(){
75                 return this.rowHeight + this.borderHeight;
76         },
77
78         getVisibleRowCount : function(){
79                 var rh = this.getCalculatedRowHeight();
80                 var visibleHeight = this.scroller.dom.clientHeight;
81                 return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
82         },
83
84         getVisibleRows: function(){
85                 var count = this.getVisibleRowCount();
86                 var sc = this.scroller.dom.scrollTop;
87                 var start = (sc == 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1);
88                 return {
89                         first: Math.max(start, 0),
90                         last: Math.min(start + count + 2, this.ds.getCount()-1)
91                 };
92         },
93
94         doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
95                 var ts = this.templates, ct = ts.cell, rt = ts.row, rb = ts.rowBody, last = colCount-1;
96                 var rh = this.getStyleRowHeight();
97                 var vr = this.getVisibleRows();
98                 var tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;';
99                 // buffers
100                 var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
101                 for (var j = 0, len = rs.length; j < len; j++) {
102                         r = rs[j]; cb = [];
103                         var rowIndex = (j+startRow);
104                         var visible = rowIndex >= vr.first && rowIndex <= vr.last;
105                         if (visible) {
106                                 for (var i = 0; i < colCount; i++) {
107                                         c = cs[i];
108                                         p.id = c.id;
109                                         p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
110                                         p.attr = p.cellAttr = "";
111                                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
112                                         p.style = c.style;
113                                         if (p.value == undefined || p.value === "") {
114                                                 p.value = "&#160;";
115                                         }
116                                         if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
117                                                 p.css += ' x-grid3-dirty-cell';
118                                         }
119                                         cb[cb.length] = ct.apply(p);
120                                 }
121                         }
122                         var alt = [];
123                         if(stripe && ((rowIndex+1) % 2 == 0)){
124                             alt[0] = "x-grid3-row-alt";
125                         }
126                         if(r.dirty){
127                             alt[1] = " x-grid3-dirty-row";
128                         }
129                         rp.cols = colCount;
130                         if(this.getRowClass){
131                             alt[2] = this.getRowClass(r, rowIndex, rp, ds);
132                         }
133                         rp.alt = alt.join(" ");
134                         rp.cells = cb.join("");
135                         buf[buf.length] =  !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
136                 }
137                 return buf.join("");
138         },
139
140         isRowRendered: function(index){
141                 var row = this.getRow(index);
142                 return row && row.childNodes.length > 0;
143         },
144
145         syncScroll: function(){
146                 Ext.ux.grid.BufferView.superclass.syncScroll.apply(this, arguments);
147                 this.update();
148         },
149
150         // a (optionally) buffered method to update contents of gridview
151         update: function(){
152                 if (this.scrollDelay) {
153                         if (!this.renderTask) {
154                                 this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
155                         }
156                         this.renderTask.delay(this.scrollDelay);
157                 }else{
158                         this.doUpdate();
159                 }
160         },
161
162         doUpdate: function(){
163                 if (this.getVisibleRowCount() > 0) {
164                         var g = this.grid, cm = g.colModel, ds = g.store;
165                         var cs = this.getColumnData();
166
167                         var vr = this.getVisibleRows();
168                         for (var i = vr.first; i <= vr.last; i++) {
169                                 // if row is NOT rendered and is visible, render it
170                                 if(!this.isRowRendered(i)){
171                                         var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
172                                         this.getRow(i).innerHTML = html;
173                                 }
174                         }
175                         this.clean();
176                 }
177         },
178
179         // a buffered method to clean rows
180         clean : function(){
181                 if(!this.cleanTask){
182                         this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
183                 }
184                 this.cleanTask.delay(this.cleanDelay);
185         },
186
187         doClean: function(){
188                 if (this.getVisibleRowCount() > 0) {
189                         var vr = this.getVisibleRows();
190                         vr.first -= this.cacheSize;
191                         vr.last += this.cacheSize;
192
193                         var i = 0, rows = this.getRows();
194                         // if first is less than 0, all rows have been rendered
195                         // so lets clean the end...
196                         if(vr.first <= 0){
197                                 i = vr.last + 1;
198                         }
199                         for(var len = this.ds.getCount(); i < len; i++){
200                                 // if current row is outside of first and last and
201                                 // has content, update the innerHTML to nothing
202                                 if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
203                                         rows[i].innerHTML = '';
204                                 }
205                         }
206                 }
207         },
208
209         layout: function(){
210                 Ext.ux.grid.BufferView.superclass.layout.call(this);
211                 this.update();
212         }
213 });
214 </pre>    \r
215 </body>\r
216 </html>