我想使用 dojox.mvc 将 dgrid 绑定到 dojo 中的表单。虽然有很多关于如何将单个模型绑定到表单的示例，但没有任何内容显示如何使用网格来执行此操作。网格必须与表单共享同一个存储，当有人单击网格中的一行时，表单将被更新。我的主要问题是他们使用的存储不同：dgrid 使用 dojo.store 对象，而 mvc 使用 dojo.Stateful。dojo.store 有一个名为“data”的对象，它保存数据列表，而 dojo.Stateful 有“items”。欢迎任何帮助。
问问题
980 次
1 回答
0
虽然我不是 dgrid 的专家，但我认为桥接 dgrid 的选择和 dojo/Stateful 会有所帮助。如下所示（dgrid 应与 dojo/dijit/dojox 位于同一目录中，并且 /path/to/dojotoolkit 应替换为放置 dojo/dijit/dojox/dgrid 的目录）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test dgrid and dojox/mvc</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link id="themeStyles" rel="stylesheet" href="/path/to/dojotoolkit/dijit/themes/claro/claro.css"/>
<style type="text/css">
@import "/path/to/dojotoolkit/dojo/resources/dojo.css";
h2 {
margin: 12px;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
.ui-widget{
margin: 10px;
}
</style>
<script type="text/javascript" src="/path/to/dojotoolkit/dojo/dojo.js"
data-dojo-config="async: true, mvc: {debugBindings: 1}"></script>
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojo/_base/Color",
"dojo/parser",
"dojo/when",
"dojo/Stateful",
"dgrid/List",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dgrid/test/data/base",
"dojo/domReady!"
], function(declare, Color, parser, when, Stateful, List, Grid, Selection){
when(parser.parse(), function(){
var undef,
columns = {
col1: "Name",
col5: "Red",
col6: "Green",
col7: "Blue"
},
grid = new (declare([Grid, Selection]))({
store: smallColorStore,
columns: columns
}, "grid"),
Model = declare(Stateful, {
_colorGetter: function(){
return this.col5 === undef || this.col6 === undef || this.col7 === undef ? "" : new Color([this.col5, this.col6, this.col7]).toHex();
},
_colorSetter: function(value){
if(value){
var rgb = new Color(value).toRgb();
this.col5 = rgb[0];
this.col6 = rgb[1];
this.col7 = rgb[2];
}
return value;
}
});
grid.on("dgrid-select", function(event){
if((ctrl.model || {}).id !== undef && ctrl.model.id != event.rows[0].id){
save();
}
ctrl.set("model", new Model(event.rows[0].data));
});
grid.on("dgrid-deselect", function(event){
if((ctrl.model || {}).id !== undef && ctrl.model.id == event.rows[0].id){
save();
ctrl.set("model", new Model({col1: ""}));
}
});
function save(){
var model = ctrl.model;
if(model.id){
for(var s in columns){
grid.updateDirty(model.id, s, model[s]);
}
}
grid.save();
}
handleSaveButton = function(){
save();
grid.select(model.id);
};
});
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<h2>A basic grid with dojox/mvc</h2>
<div id="grid"></div>
<span data-dojo-id="ctrl"
data-dojo-type="dojox/mvc/ModelRefController"></span>
<div style="padding:10px;"
data-dojo-type="dojox/mvc/Group"
data-dojo-props="target: at(ctrl, 'model')">
<label for="name">Name</label>
<input id="name" type="text"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'col1')">
<div data-dojo-type="dijit/ColorPalette"
data-dojo-props="value: at('rel:', 'color'), palette: '7x10'"></div>
</div>
<input type="button" style="margin:10px;"
data-dojo-type="dijit/form/Button"
data-dojo-props="label: 'Save', onClick: function(){ handleSaveButton(); }">
</body>
</html>
于 2013-01-30T08:36:00.440 回答