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.
133 lines (130 loc) • 4.76 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Static Master/Detail Pattern -- Declarative 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"
}
};
</script>
</head>
<body class="claro">
<!--
The following dojox.mvc.StatefulModel 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.
-->
<div data-dojo-type="dojox.mvc.StatefulModel" data-dojo-props="data: order" data-dojo-id="model"></div>
<div id="wrapper">
<div id="header">
<div id="navigation">
</div>
<div id="headerInsert">
<h1>Order Shipping Details</h1>
<h2>Declarative 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 attribute for the outermost container obtains the binding from the
"page scope" itself.
-->
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'expr:model'">
<div class="row">
<label class="cell" for="serialInput">Order #:</label>
<input class="cell" id="serialInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'Serial'"/>
</div>
<div class="row">
<label class="cell" for="lastnameInput">Last:</label>
<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'Last'"/>
</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'"/>
</div>
</div>
<br/>
Choose:
<button id="shipto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', 'model.ShipTo');}">Ship To</button>
<button id="billto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', 'model.BillTo');}">Bill To</button>
<br/>
<!--
For convenience, the widget hierarchy matches the data hierarchy
(see JSON literal above).
In this implementation, the child ref attributes are simple property names
of the parent binding context.
The ref attribute may support more advanced constructs, such as queries
over the parent widget's or other application specified binding context.
-->
<div class="row" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model.ShipTo'">
<div class="row">
<label class="cell" for="streetInput">Street:</label>
<input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'Street'"/>
</div>
<div class="row">
<label class="cell" for="cityInput">City:</label>
<input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'City'"/>
</div>
<div class="row">
<label class="cell" for="stateInput">State:</label>
<input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'State'"/>
</div>
<div class="row">
<label class="cell" for="zipInput">Zipcode:</label>
<input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'Zip'"/>
</div>
</div>
<br/>
Model:
<button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){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>