132 lines
4.4 KiB
HTML
132 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Static Master/Detail Pattern -- Multiple Address Detail example</title>
|
|
|
|
<script src="../../../dojo/dojo.js"
|
|
type="text/javascript"
|
|
djConfig="parseOnLoad: true, 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("dijit.form.TextBox");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dojo.parser");
|
|
|
|
// Initial data
|
|
var order = {
|
|
"Serial" : "360324",
|
|
"First" : "John",
|
|
"Last" : "Doe",
|
|
"Email" : "jdoe@example.com",
|
|
"ShipTo" : {
|
|
"Street" : "123 Valley Rd",
|
|
"City" : "Katonah",
|
|
"State" : "NY",
|
|
"Zip" : "10536"
|
|
},
|
|
"BillTo" : {
|
|
"Street" : "17 Skyline Dr",
|
|
"City" : "Hawthorne",
|
|
"State" : "NY",
|
|
"Zip" : "10532"
|
|
}
|
|
};
|
|
|
|
// The dojox.mvc.StatefulModel class creates a data model instance
|
|
// where each leaf within the data model is decorated with dojo.Stateful
|
|
// properties that widgets can bind to and watch for their changes.
|
|
var model = dojox.mvc.newStatefulModel({ data : order });
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<div id="navigation">
|
|
</div>
|
|
<div id="headerInsert">
|
|
<h1>Order Shipping Details</h1>
|
|
<h2>Data Binding Example - Group Container.</h2>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div id="leftNav">
|
|
</div>
|
|
<div id="mainContent">
|
|
<!--
|
|
The group container denotes some logical grouping of widgets and also serves
|
|
to establish a parent data binding context for its children.
|
|
The ref value for the outermost container obtains the binding from the
|
|
"page scope" itself.
|
|
-->
|
|
<div class="row" dojoType="dojox.mvc.Group" ref="model">
|
|
<div class="row">
|
|
<label class="cell" for="serialInput">Order #:</label>
|
|
<input class="cell" id="serialInput" dojoType="dijit.form.TextBox"
|
|
ref="'Serial'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="lastnameInput">Last:</label>
|
|
<input class="cell" id="lastnameInput" dojoType="dijit.form.TextBox"
|
|
ref="'Last'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="emailInput">Email:</label>
|
|
<input class="cell" id="emailInput" dojoType="dijit.form.TextBox"
|
|
ref="'Email'"></input>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
Choose:
|
|
<button id="shipto" type="button" dojoType="dijit.form.Button" onclick="setRef('addrGroup', model.ShipTo)">Ship To</button>
|
|
<button id="billto" type="button" dojoType="dijit.form.Button" onclick="setRef('addrGroup', model.BillTo)">Bill To</button>
|
|
<br/>
|
|
<!--
|
|
For convenience, the widget hierarchy matches the data hierarchy
|
|
(see JavaScript object literal above).
|
|
In this implementation, the child ref values are simple property names
|
|
of the parent binding context.
|
|
The ref value may support more advanced constructs, such as queries
|
|
over the parent widget's or other application specified binding context.
|
|
-->
|
|
<div class="row" id="addrGroup" dojoType="dojox.mvc.Group" ref="model.ShipTo">
|
|
<div class="row">
|
|
<label class="cell" for="streetInput">Street:</label>
|
|
<input class="cell" id="streetInput" dojoType="dijit.form.TextBox"
|
|
ref="'Street'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="cityInput">City:</label>
|
|
<input class="cell" id="cityInput" dojoType="dijit.form.TextBox"
|
|
ref="'City'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="stateInput">State:</label>
|
|
<input class="cell" id="stateInput" dojoType="dijit.form.TextBox"
|
|
ref="'State'"></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="zipInput">Zipcode:</label>
|
|
<input class="cell" id="zipInput" dojoType="dijit.form.TextBox"
|
|
ref="'Zip'"></input>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
Model:
|
|
<button id="reset" type="button" dojoType="dijit.form.Button" onclick="model.reset()">Reset</button>
|
|
</div></div></div>
|
|
<script type="text/javascript">
|
|
function setRef(id, addrRef) {
|
|
var widget = dijit.byId(id);
|
|
widget.set("ref", addrRef);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|