dojox.data.JsonRestStoreストアとして使用するグリッドがあります。ウィジェットフォーム（ ）を使ってデータを編集したいdijit.form.Form。グリッドとフォームをバインドするdojo/on代わりに実装します。dojo.connect
JsonRestStore ("/rest/console/ getobjectlist ") の結果 (Restful Web Service - JAX-RSによって提供)
[{"host":"192.168.3.7","port":"5474"},
{"host":"192.168.4.41","port":"8100"},
{"host":"192.168.5.5","port":"9999"}]
ここでは、プログラムによるGridとJsonRestStore
<script>
require(
[ 'dojo/dom', 'dojo/json', 'dojox/json/schema',
'dojox/data/JsonRestStore', 'dojox/grid/DataGrid',
'dojox/grid/_CheckBoxSelector', 'dojo/on', 'dojo/request/xhr', 'dijit/Dialog',
'dijit/ProgressBar', 'dijit/MenuBar',
'dijit/PopupMenuBarItem', 'dijit/MenuItem', 'dijit/Menu',
'dijit/Calendar', 'dijit/form/Form',
'dijit/form/ValidationTextBox', 'dijit/form/TextBox',
'dijit/form/FilteringSelect', 'dijit/form/Button',
'dijit/form/ComboBox', 'dijit/form/ComboButton',
'dijit/form/RadioButton', 'dijit/form/DropDownButton',
'dijit/form/MultiSelect', 'dijit/form/NumberTextBox',
'dijit/form/ToggleButton', 'dijit/form/SimpleTextarea',
'dijit/layout/BorderContainer',
'dijit/layout/TabContainer', 'dijit/layout/ContentPane',
'dojo/domReady!' ],
function(dom, JSON, schema, JsonRestStore, DataGrid,
_CheckBoxSelector, on, xhr) {
var store = new JsonRestStore(
{
target : "/rest/console/getobjectlist"
});
var gridCell = [
{
name : "Host",
field : "host"
},
{
name : "Port",
field : "port",
width : "30%"
},
{
name : "Action",
field : "action",
formatter : function(item) {
var link = '<a href="edit.jsp" title="Edit"><div class="dijitIconEdit"></div></a> <a href="adapter.html" title="delete.jsp"><div class="dijitIconDelete"></div></a>';
return link;
}
}
];
gridLayout = [ {
// First, our view using the _CheckBoxSelector custom type
type : "dojox.grid._CheckBoxSelector"
}, gridCell ];
var grid = new DataGrid({
store : store,
structure : gridLayout,
selectionMode: "single",
autoHeight : true
}, "ObjectGrid");
grid.startup();
on(grid, "RowClick", function showDetail (e){
var grx = dijit.byId("AdapterGrid");
var host = grid.store.getValue(grid
.getItem(e.rowIndex), "host");
var serviceurl = "/rest/console/getobject?host="+host;
console.log(serviceurl);
xhr(serviceurl,{
handleAs: "json"}
).then( function (data){
dijit.byId("detailsForm").attr("value", serviceurl);
});
} );
});
</script>
HTML
<body class="claro">
<div id="ObjectGrid"></div>
<form data-dojo-type="dijit/form/Form" id="detailsForm" method="post"
data-dojo-props="region:'center'">
<table>
<tbody>
<tr>
<td>Host:</td>
<td><input type="text" required="true" name="host" id="host"
placeholder="host address"
regExp="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
data-dojo-type="dijit/form/ValidationTextBox" /></td>
</tr>
<tr>
<td>Port:</td>
<td><input type="text" required="true" name="port" id="port"
regExp="\d+" placeholder="port"
data-dojo-type="dijit/form/ValidationTextBox"
invalidMessage="Numeric only" /></td>
</tr>
</tbody>
</table>
<!-- submit buttons -->
<input type="submit" value="Save" label="Save" id="submitButton"
data-dojo-type="dijit/form/Button" />
</form>
</body>
私の計画は、グリッドの行をクリックしてフォームデータを入力するウィジェットであり、後で POST メソッドを使用して値を変更しますが、それでも値を取得するためにスタックします。なにか提案を ？