dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
148 lines (139 loc) • 6.29 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Programmatic Repeat example, using a store with save, commit and reset</title>
<script src="../../../../dojo/dojo.js"
type="text/javascript"
djConfig="parseOnLoad: false, isDebug: true">
</script>
<style type="text/css">
@import "css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" >
dojo.require("dojox.mvc");
dojo.require("dojox.mvc.Group");
dojo.require("dojox.mvc.Repeat");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.store.DataStore");
dojo.require("dojo.parser");
var results, selectedIndex = 0;
// declared here for convenience
templateString = '<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'${this.index}\'">' +
'<label class="cell">Name:</label>' +
'<input class="cell" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: \'First\'"></input>' +
'<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setDetailsContext(\'${this.index}\');}">Details</button>' +
'</div>';
function setup() {
var writeStore = new dojo.data.ItemFileWriteStore({url: dojo.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")});
var modelPromise = dojox.mvc.newStatefulModel({store: new dojo.store.DataStore({store: writeStore})});
modelPromise.then(function(model){
results = model;
dojo.parser.parse();
// Can test with either the dojox.mvc.Repeat or my.Repeat
var repeat = new my.Repeat({
//var repeat = new dojox.mvc.Repeat({
// templateString: templateString, // not needed with my.Repeat since it is set there.
ref: model
}).placeAt('repeat2');
repeat.startup();
});
};
dojo.declare('my.Repeat', [dojox.mvc.Repeat], {
templateString : templateString
});
dojo.addOnLoad(setup);
</script>
</head>
<body class="claro" style="background-image: url(images/master_detail.png)">
<div id="wrapper">
<div id="header">
<div id="navigation">
</div>
<div id="headerInsert">
<h2>Master Detail Example - With repeat container, using a store, with save, commit and reset.</h2>
</div>
</div>
<div id="main">
<div id="leftNav">
</div>
<div id="mainContent">
<div id="searchBanner">Search Results for term: </div>
<!--
The repeat container denotes a templated UI that operates over a collection
of data records.
The UI can be customized for each iteration using properties such as
${this.index} for the iteration index.
<div id="repeatId" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'results', templateString: templateString"></div>
<div id="repeatId" data-dojo-type="my.Repeat" data-dojo-props="ref: 'results'"></div>
-->
<table><tbody><tr>
<td>
<div>
<div>Programatic Repeat using my.Repeat and its templateString: </div>
<div id="repeat2"></div>
</div>
</td>
<td>
<div>
<div>Declarative Repeat using my.Repeat does not pass templateString: </div>
<div id="repeatId2" data-dojo-type="my.Repeat" data-dojo-props="ref: 'results'"></div>
</div>
</td>
</tr></tbody></table>
<div class="spacer"></div>
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'results'">
<div id="detailsBanner">Details for selected index:</div>
<div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '0'">
<div class="row">
<label class="cell" for="firstInput">First Name:</label>
<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'First'"></input>
</div>
<div class="row">
<label class="cell" for="lastInput">Last Name:</label>
<input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"></input>
</div>
<div class="row">
<label class="cell" for="locationInput">Location:</label>
<input class="cell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Location'"></input>
</div>
<div class="row">
<label class="cell" for="officeInput">Office:</label>
<input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Office'"></input>
</div>
<div class="row">
<label class="cell" for="emailInput">Email:</label>
<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Email'"></input>
</div>
<div class="row">
<label class="cell" for="telInput">Telephone:</label>
<input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Tel'"></input>
</div>
<div class="row">
<label class="cell" for="faxInput">Fax:</label>
<input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Fax'"></input>
</div>
<div class="row">
<div class="spacer"></div>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(results[selectedIndex].toPlainObject());results[selectedIndex].commit();}">Save Item</button>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(results.toPlainObject());results.commit();;}">Commit All</button>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){results.reset();}">Reset to last saved</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// called to change the selected item
function setDetailsContext(index) {
selectedIndex = index;
var widget = dijit.byId("detailsGroup");
widget.set("ref", index);
};
</script>
</body>
</html>