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){}
}
}
};
}
分享到：
相关推荐
3. **dojox.form.FileUploader组件**：该组件提供了一个用户友好的界面，允许用户选择并上传一个或多个文件。它支持异步上传，可以通过AJAX或者IFrame技术来实现后台传输。 4. **HTML5 File API**：现代浏览器提供...
标题中的“用DOJO中的dojox.gfx做甘特图”表明了本文将探讨如何利用DOJO框架的dojox.gfx模块来创建甘特图。dojox.gfx是DOJO的一个图形库，提供了丰富的图形绘制功能，支持矢量图形的创建，非常适合用于制作图表、...
Dojo Toolkit是JavaScript的一个强大的、模块化的开发框架，其中的dojox.gfx库为浏览器端的2D图形提供了抽象层，支持多种渲染后端，如SVG、VML、Canvas和Silverlight。 这个开源项目“SVG to dojox.gfx Convertor”...
在Dojo框架中，`dojox.grid.Grid`是一个强大的数据网格组件，用于展示和操作表格数据。在提供的代码段中，尝试引用并使用这个组件来创建一个包含多个列的数据表格。然而，出现了一个404错误，表示浏览器无法找到`...
"examples"文件夹可能包含了一些演示如何在实际项目中应用PagingGrid的实例代码。"js"文件夹则可能包含了PagingGrid的源代码和其他必需的JavaScript文件，这些文件在引入到项目中时需要正确引用，以便正确运行组件。...
创建DataGrid时，首先需要创建一个`dojox/grid/DataGrid`实例，并指定其配置对象。配置对象通常包含以下属性： - `store`: 数据源，可以是Dojo的任何类型的数据存储。 - `columns`: 定义列的结构和内容，每个列...
该 bug 主要涉及到四个文件：`dojox/grid/TreeGrid.js`、`dojox/grid/_EditManager.js`、`dojox/grid/_Grid.js` 和 `dojox/grid/cells/tree.js`。 #### 问题概述 根据提供的部分代码，可以看出该 bug 的核心问题是...
DojoX包含了如dojox.charting用于绘制统计图表，dojox.collections提供集合数据结构，dojox.encoding实现了加密功能，dojox.math包含数学函数，dojox.reflect提供反射功能，dojox.storage支持本地数据存储，dojox....
- DojoX包则包含一些扩展功能和试验性质的功能，这些功能在成熟后可能会被整合到Dojo或Dijit中。 4. 常用包及其功能： - dojo.io：提供不同IO传输方式，如script、iframe等，用于Ajax调用。 - dojo.dnd：提供...
4. **自定义模板**：通过使用dojox.grid.cells和dojox.grid.cells._Base，开发者可以创建自定义单元格类型，从而实现特殊格式或行为。这些例子可能包含如何显示日期、货币或其他复杂格式的单元格。 5. **编辑功能**...
其中 Dojo 是核心功能包，Dijit 中存放的是 Dojo 所有的 Widget 组件，而 DojoX 则是一些扩展或试验功能。 常用的包包括： * dojo.io：不同的 IO 传输方式，如 script 和 IFrame 等。 * dojo.dnd：拖放功能的辅助 ...
3. **DojoX** - `dojox.charting`：统计图表绘制工具。 - `dojox.collections`：提供高级数据结构，如列表、查询、集合等。 - `dojox.encoding`：加密API，支持多种算法。 - `dojox.math`：数学函数库。 - `...
导入即可运行，包括下面jar。 jar包： ...全网搜索dojox.cometd实现WEBQQ，没有可以运行的源码包项目，搞了五天，分享给大家，真实可用，jar包就找了好久，花了5分，搞了5天5分。共10分。 付原作者地址： ...
<table dojoType="dojox.grid.DataGrid" jsid="grid" store="jsonStore" query="{status: 'open'}"> <th field="name">Name <th field="description">Description ``` - **说明**：通过`store`属性...
- **DojoX**：扩展或试验功能包，一些功能可能会在后续版本中移至 Dojo 或 Dijit 命名空间。 #### 常用包介绍 下面是 Dojo 中一些常用的包及其功能： - **dojo.io**：提供多种 IO 传输方式，如 script、IFrame 等...
- **DojoX**：扩展功能包，包含一些实验性的功能和工具。 接下来详细介绍一些常用的包： - **dojo.io**：提供了多种网络请求方式，包括脚本、IFrame等方式。 - **dojo.dnd**：用于实现拖拽功能的API。 - **...
3. **DojoX**：扩展或试验功能的命名空间。 - **dojo.io**：提供了多种IO传输方式，如script、IFrame等。 - **dojo.dnd**：提供拖放功能的支持。 - **dojo.string**：字符串处理API，支持修整、转换大小写、编码等...
DataGrid的核心是`dojox/grid/DataGrid`模块，它依赖于`dojo/store`和`dojo/data`这两个数据层模块。分页通常与`dojo/data/ItemFileReadStore`或`dojo/store/Memory`结合使用，它们负责存储和检索数据。 **分页实现...
3. **跨浏览器兼容性**：Dojo支持多种主流浏览器，如Chrome、Firefox、Safari等，这使得开发的应用程序可以在不同的平台上运行。 4. **可扩展性和灵活性**：开发者可以根据需要自定义组件或者创建新的组件，极大地...