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

最新推荐文章于 2018-12-12 17:00:36 发布

shuangmubuchenglin

最新推荐文章于 2018-12-12 17:00:36 发布

阅读量86

点赞数

分类专栏： dojo 文章标签： javascript dojo ViewUI

本文链接：https://blog.csdn.net/shuangmubuchenglin/article/details/84385838

版权

dojo 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bug
dojox.grid.DataGrid 里存在一些 Bug，本篇将介绍如何解决它们：

1. layout定义为%时，滚动条的问题：
如下图，当列宽用"%"定义时，无论如何调整比例(就算不满100%) 也会出现横向滚动条。(IE, chrome 都有这个bug)
[html] view plaincopy

<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】
[javascript] view plaincopy

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", _View, {
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">)的时候，在点击一览时，一览会闪一下。
我们可以通过下面的方法来修正这个问题：
[javascript] view plaincopy

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

shuangmubuchenglin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bug

dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bugdojox.grid.DataGrid 里存在一些 Bug，本篇将介绍如何解决它们：1. layout定义为%时，滚动条的问题：如下图，当列宽用"%"定义时，无论如何调整比例(就算不满100%) 也会出现横向滚动条。(IE, chrome 都有这个bug)[html] view pla...
复制链接

扫一扫