BufferView.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:6k
源码类别:

JavaScript

开发平台:

JavaScript

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