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 に答える