1. layout定义为%时,滚动条的问题:
如下图,当列宽用"%"定义时,无论如何调整比例(就算不满100%) 也会出现横向滚动条。(IE,chrome 都有这个bug)
<table dojoType='dojox.grid.DataGrid' id='grid1' jsid='js_grid1' style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)" selectionMode='single' > <thead> <tr> <th field="f1" width="20%" >列1</th> <th field="f2" width="20%" >列2</th> <th field="f3" width="20%" >列3</th> <th field="f4" width="20%" >列4</th> <th field="f5" width="20%" >列5</th> </tr> </thead> </table>
通过继承 dojox.grid._View 重写 getScrollbarWidth() 方法,使得 ViewContentWidth 不会产生 overflow。
【dojo 1.8】
define("DataGridEx",["dojox/grid/DataGrid","dojox/grid/_View","dojo/_base/html","dojox/html/metrics"],function(DataGrid,_View,html,metrics) { var declare = dojo.declare; var ViewEx = declare("ViewEx",{ getScrollbarWidth: function(){ var hasScrollSpace = this.hasVScrollbar(); var overflow = html.style(this.scrollBoxNode,"overflow"); if(this.noscroll || !overflow || overflow == "hidden"){ hasScrollSpace = false; }else if(overflow == "scroll"){ hasScrollSpace = true; } // 稍微扩大 scrollbar 的宽度 return (hasScrollSpace ? metrics.getScrollbar().w+2: 0); // Integer } }); var DataGridEx = declare("DataGridEx",DataGrid,{ createView: function(inClass,idx){ // 改用继承后的 View 类 var view = new ViewEx({ grid: this,index: idx }); this.viewsNode.appendChild(view.domNode); this.viewsHeaderNode.appendChild(view.headerNode); this.views.addView(view); html.attr(this.domNode,"align",this.isLeftToRight() ? 'left' : 'right'); return view; } }); DataGridEx.markupFactory = DataGrid.markupFactory; return DataGridEx; });
这样横向滚动条就木有了。
2. 颤动的一览
当使用兼容模式(<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">)的时候,在点击一览时,一览会闪一下。
我们可以通过下面的方法来修正这个问题:
postCreate: function() { this.inherited(arguments); this.focus._focusifyCellNode = function(inBork){ var n = this.cell && this.cell.getNode(this.rowIndex); if(n){ dojo.toggleClass(n,this.focusClass,inBork); if(inBork){ var sl = this.scrollIntoView(); try{ if(!this.grid.edit.isEditing()){ //dojox.grid.util.fire(n,"focus"); //if(sl){ this.cell.view.scrollBoxNode.scrollLeft = sl; } } }catch(e){} } } }; }