dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bug

dojox.grid.DataGrid 里存在一些 Bug，本篇将介绍如何解决它们：

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){}
                         }
                      }
                   };
                }

dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bug

相关文章