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.
159 lines (148 loc) • 6.51 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Step 5 of test for Controllers, uses an EditControllerMixin with a StoreControllerMixin.</title>
<style type="text/css">
@import "../css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
var ctrl;
require([
'dojo/parser',
'dojo/ready',
'dojo/when',
'dojo/store/Memory',
'dojox/mvc/getStateful',
'dojox/mvc/EditStoreRefController',
'dojox/mvc/parserExtension',
'dijit/form/TextBox',
'dijit/form/Button',
'dojox/mvc/Group',
'dojox/mvc/Output'
], function(parser, ready, when, Memory, getStateful, EditStoreRefController){
// Initial data
var storeData = {
"identifier": "id",
"items": [
{
"id" : "360324",
"FullName" : "Mr. John Doe",
"Email" : "jdoe@example.com",
"AddressLine1" : "123 Valley Rd.",
"AddressLine2" : "",
"City" : "Cary",
"State" : "NC",
"Zip" : "27513"
}
]
};
// To move from an EditModelRefController to use an EditStoreRefController, need to require EditStoreRefController,
// Memory, and when. Also needed to change the data to be valid for a store query.
//
// Because of the queryStore call had to move the call to parser.parse inside the when to wait for it.
// The change in the data for queryStore required changes to the bindings. had to add a group with target: at('rel:','0')
// for the bindings of fields.
//
// With holdModelUntilCommit set to true, you will want to bind the output address for the group to
// "target: at(ctrl,'sourceModel')", if holdModelUntilCommit is false you can stay with model, sourceModel will also work.
// You can change holdModelUntilCommit to false to see how that works, updates will be reflected into the Verify section
// immediately upon focus changes, and Reset will revert back to the last saved model.
// The EditStoreRefController constructor sets store to the memory store and uses queryStore() to setup the models.
//
transformAddress2Class = {
format: function(value){
if(value && value.trim().length > 0){
return "row" // if AddressLine2 is set return row for class
}
return "hiderow"; // if AddressLine2 is not set return hiderow for class
}
};
ctrl = new EditStoreRefController({store: new Memory({data:storeData}), holdModelUntilCommit: true});
when(ctrl.queryStore(), function(){
parser.parse();
});
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="wrapper">
<div id="main">
<div>
<h2>Step 5 of test for Controllers, uses an EditStoreRefController with holdModelUntilCommit: true.</h2>
<h2>Enter Shipping Address</h2>
</div>
<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(ctrl,'model')">
<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:','0')">
<div class="fullrow">
<label class="cell" for="nameInput">Full Name:</label>
<input class="cell" id="nameInput" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'FullName')">
</div>
<div class="fullrow">
<label class="cell" for="AddressLine1Input">Address Line1:</label>
<input class="cell" id="AddressLine1Input" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'AddressLine1')">
</div>
<div class="fullrow">
<label class="cell" for="AddressLine2Input">Address Line2:</label>
<input class="cell" id="AddressLine2Input" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'AddressLine2')">
</div>
<div class="fullrow">
<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="fullrow">
<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="fullrow">
<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>
</div>
<br/>
<div class="fullrow">
<button class="buttoncell" id="reset" type="button" data-dojo-type="dijit/form/Button" data-dojo-props="onClick: function(){ ctrl.reset(); }">Reset</button>
<button class="buttoncell" id="commit" type="button" data-dojo-type="dijit/form/Button" data-dojo-props="onClick: function(){ ctrl.commit(); }">Save</button>
</div>
<br/>
<div>
<h2>Verify the shipping address, will not update until saved.</h2>
</div>
<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(ctrl,'sourceModel')">
<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:','0')">
<div class="fullrow">
<div class="boldnamecell" id="nameOutput" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'FullName')"></div>
</div>
<div class="fullrow">
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'AddressLine1')"></div>
</div>
<div class="hiderow" data-mvc-bindings="class: at('rel:', 'AddressLine2').direction(at.from).transform(transformAddress2Class)">
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'AddressLine2')"></div>
</div>
<div class="fullrow">
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="exprchar:'%', value: at('rel:', 'City')">%{this.value},</div>
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'State')"></div>
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'Zip')"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>