我试图在我dojox.grid.DataGrid
似乎遇到很多困难的情况下包含一些编辑小部件。我已经尝试了我能想到的一切来让它工作,但有些事情并不顺利。当我开始遇到问题时,我尝试几乎完全从网格测试中复制并模拟我的代码“突破”,但没有成功。网格的基本编辑似乎有效。在下面的示例中,“事件”列允许编辑,但使用该cellType
属性的两列不起作用。事实上,他们似乎也忽略了其他属性(如styles
),这似乎表明遇到了某种问题,但 FireBug 中没有任何内容。我也在 Chrome 和 Firefox 之间得到相同的行为。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="javascript/dojotoolkit/dijit/themes/tundra/tundra.css">
<style type="text/css">
@import "css/gctilog.css";
@import "javascript/dojotoolkit/dojo/resources/dojo.css";
@import "javascript/dojotoolkit/dijit/themes/tundra/tundra.css";
@import "javascript/dojotoolkit/dojox/grid/resources/Grid.css";
@import "javascript/dojotoolkit/dojox/grid/resources/tundraGrid.css";
@import "javascript/dojotoolkit/ocp/resources/MultiStateCheckBox.css";
</style>
<script type="text/javascript" src="javascript/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, locale:'en-gb'"></script>
<script type="text/javascript">
dojo.require("dojo.currency");
dojo.require("dijit.dijit");
dojo.require("dijit.form.HorizontalSlider");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.layout.ExpandoPane");
dojo.require("dojox.timing");
dojo.require("ocp.MultiStateCheckBox");
dojo.require("dojo.parser");
formatCurrency = function(inDatum){
return isNaN(inDatum) ? '...' : dojo.currency.format(inDatum, this.constraint);
}
</script>
<script type="text/javascript" src="javascript/formatter.js"></script>
<script type="text/javascript" src="javascript/utilities.js"></script>
</head>
<body class="tundra">
<div name="labelCallids">Call IDs</div>
<div dojoType="dojox.data.JsonRestStore" id="callidStore4" jsId="callidStore4" target="logmap/maps.php/maps/4/callids/" idAttribute="callid"></div>
<table dojoType="dojox.grid.DataGrid" id="callidGrid4" store="callidStore4" query="{ callid: '*' }" style="width: 950px; border: 1px solid rgb(0,156,221); margin-left: 15px;" clientSort="false" autoHeight="10" noDataMessage="No Call IDs Available...">
<thead>
<tr>
<th field="callid" width="375px">Call ID</th>
<th cellType="dojox.grid.cells.ComboBox" field="type" options="SIP,TLib" editable="true" width="10em" styles='text-align: center;'>Type</th>
<th field="event_count" width="40px" editable="true" styles="text-align: right;">Events</th>
<th field="start_ts" width="75px" formatter="secToHourMinSecMS">Start</th>
<th field="end_ts" width="75px" formatter="secToHourMinSecMS">End</th>
<th field="duration" width="75px" formatter="secToHourMinSecMS">Duration</th>
<th cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.HorizontalSlider" field="include" formatter="formatCurrency" constraint="{currency:'EUR'}" editable="true" width="10em" styles='text-align: right;'>Amount</th>
</tr>
</thead>
</table>
</body>
</html>
有什么我想念的吗。这似乎是基本的,但我似乎看不到它。
[编辑]
我所做的是使用格式化程序返回一个 dijit 小部件以返回一个小部件。因此,在声明性模型中,我指定如下内容:
<th field="type" formatter="getMultiField" width="10em" styles='text-align: center;'>Type</th>
然后我编写了一个如下所示的 JavaScript 函数来返回我想要的小部件。
function getMultiField(value) {
var jsonValue = JSON.parse(value); //I provide the value of the widget as JSON
//from my data store, so I need to parse it
var control = new ocp.MultiStateCheckBox({ //my custom widget
id : "dMSCB"+(new Date).getTime()+Math.ceil(Math.random()*100000), //generate a unique ID
value : jsonValue.value,
onChange : function (value {...}) //code to manipulate the underlying data store
});
return control; //The dojo 1.4 grid can handle a returned Widget
}