Question

如何在gridx的cell中显示控件

Answer 1

在gridx的列定义中，一个decorator方法可以被用来在cell中显示任何HTML/CSS. 但是有时候这稍显不够。当cell中需要放入复杂的控件时，从decorator方法中返回的纯string不再有效。所以gridx/modules/CellWidget模块在这是显示了作用。

为何是CellWidget

CellWidget模块通过grid的body模块中的onAfterRow事件将widget附加到cell节点中。其中的关键是如何才能高效地完成这个工作。
Grid的body随着时间不断刷新，刷新的原因可以是排序，过滤，分页，虚拟滚动，改变值，展开树节点，等等。每次body被刷新，行被重新，并且onAfterRow事件将会被处罚。如果我们总是在onAfterRow事件中创建新的widget，那将会非常浪费。如果你点击header两次为了要是的一列降序排序，许多widget将会被立刻摧毁。所以一些缓存机制必须被建立。第一个方法是为在每个cell中使用一个widget，无论被刷新多少次。这解决了一些刷新问题，但是如果我们有100000行，这仍然不高效。试想如果一个用户慢慢地滚动这个巨大的grid来看每一行，最终将会有多少widget被创建！
所以CellWidget的目的是创建尽可能少的控件。方法是使用set('value',...)方法在row之间重用控件。

如何使用CellWidget

在控件上设置值通常比创建一个新控件快。这是一个好方法，但是需要用户意识到重用这件事情。让我们首先看一下如何使用CellWidget模块：

[javascript] view plaincopy
var grid = new Grid({
cacheClass: 'gridx/core/model/cache/Async',
store: someStore,
structure: [
{ id: 'progress', field: 'progress', name: 'Install Progress',
widgetsInCell: true,
decorator: function(){
return "<div data-dojo-type='dijit.ProgressBar' data-dojo-props='maximum: 1' " +
"class='gridxHasGridCellValue' style='width: 100%;'></div>";
}
}
],
modules: [
"gridx/modules/CellWidget"
]
});