You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
4.3 KiB
108 lines
4.3 KiB
<!DOCTYPE html> |
|
<html > |
|
<head> |
|
|
|
<style type="text/css"> |
|
@import "../../../../dijit/themes/claro/claro.css"; |
|
</style> |
|
<style type="text/css">.row { width: 500px; display: inline-block; margin: 5px; } |
|
.cell { width: 20%; display:inline-block; }</style> |
|
<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: true, mvc: {debugBindings: true}'></script><script>var searchRecords; |
|
|
|
require([ |
|
'dojo/parser', |
|
'dojo/ready', |
|
'dojox/mvc/getStateful', |
|
'dijit/form/TextBox', |
|
'dijit/form/Button', |
|
'dojox/mvc/Group', |
|
'dojox/mvc/Output' |
|
], function(parser, ready, getStateful){ |
|
|
|
// 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 getStateful call will take json data and create make it Stateful |
|
model = getStateful(order); |
|
// the model created above is initialized with |
|
// model.First set to "John", model.Last set to "Doe" and model.Email set to "jdoe@example.com" |
|
|
|
}); |
|
|
|
function setRef(id, model, attr) { |
|
require([ |
|
"dijit/registry", |
|
"dojox/mvc/at" |
|
], function(registry, at){ |
|
var widget = registry.byId(id); |
|
widget.set("target", model[attr]); |
|
}); |
|
};</script> |
|
</head> |
|
<body class="claro"> |
|
<script type="dojo/require">at: "dojox/mvc/at"</script> |
|
<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 target attribute for the outermost container obtains the binding from the |
|
"page scope" itself. |
|
--> |
|
<!-- |
|
For convenience, the widget hierarchy matches the data hierarchy |
|
(see JSON literal above). |
|
In this implementation, the child attributes are simple property names |
|
of the parent binding context. |
|
--> |
|
<div class="row" id="addrGroup" data-dojo-type="dojox/mvc/Group" |
|
data-dojo-props="target: 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="value: at('rel:', '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="value: at('rel:', '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="value: at('rel:', '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="value: at('rel:', 'Zip')"> |
|
</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/> |
|
<br/> |
|
</div></div> |
|
</body> |
|
</html>
|
|
|