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.
258 lines (242 loc) • 9.96 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Step 9 of test for Controllers, uses an EditStoreRefListController with holdModelUntilCommit: true.</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/_base/declare',
'dojo/ready',
'dojo/when',
'dojo/store/Memory',
'dojox/mvc/at',
'dojox/mvc/getStateful',
'dojox/mvc/EditStoreRefListController',
'dojox/mvc/ListController',
'dojox/mvc/parserExtension',
'dijit/form/TextBox',
'dijit/form/Button',
'dijit/form/RadioButton',
'dojox/mvc/Group',
'dojox/mvc/WidgetList',
'dojox/mvc/_InlineTemplateMixin',
'dojox/mvc/Output'
], function(parser, declare, ready, when, Memory, at, getStateful,
EditStoreRefListController, ListController){
// Initial data
var storeData = {
"identifier": "id",
"items": [
{
"id" : "360324",
"AddressName" : "Home",
"Checked" : true,
"FullName" : "Mr. John Doe",
"Email" : "jdoe@example.com",
"AddressLine1" : "123 Valley Rd.",
"AddressLine2" : "",
"City" : "Cary",
"State" : "NC",
"Zip" : "27513"
},
{
"id" : "360325",
"AddressName" : "Work",
"Checked" : false,
"FullName" : "Mr. John Doe",
"Email" : "jdoe@example.com",
"AddressLine1" : "4567 S Miami Blvd",
"AddressLine2" : "Bldg:502, Office:M120",
"City" : "Durham",
"State" : "NC",
"Zip" : "27703"
}
]
};
// To move from EditStoreRefListController with holdModelUntilCommit: false to use holdModelUntilCommit: true
// I had to add the require for dojox/mvc/at and ListController
//
// This test uses holdModelUntilCommit: true on the WidgetList, so updates to the address will not show-up in
// the "Verify" section and in the "Select an address" section until "Save" is pressed.
// But using holdModelUntilCommit: true requires use of a second controller (ctrlSource) which is a ListController
// and is bound to the sourceModel and cursorIndex of the first controller (ctrl).
//
// The "Verify" section and the "Select an address" section are bound to at(ctrlSource,'cursor') and at(ctrlSource, 'model') respectively.
// To set the Radio buttons correctly, "Checked" has to be updated in ctrl.model inside the transformRadioChecked.
//
var ctrlclz = declare([EditStoreRefListController], {
transformRadioChecked : {
format: function(checked){
if(checked){
ctrl.set('cursorIndex', this.target.index);
console.log("in transformRadioChecked setting cursorIndex to "+this.target.index);
}
ctrl.model[this.target.index].set("Checked", checked); // had to do this here to update the ctrl.model too.
return checked;
},
parse: function(checked){
return checked;
}
},
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
}
},
addEmpty : function(empty){
var idx = this.model.length;
var data = {
"id" : Math.random(),
"AddressName" : "New Address",
"Checked" : true,
"FullName" : "",
"Email" : "",
"AddressLine1" : "",
"AddressLine2" : "",
"City" : "",
"State" : "",
"Zip" : ""
};
if(!empty){
data = {
"id" : Math.random(),
"AddressName" : "Copy of "+this.cursor.AddressName,
"Checked" : true,
"FullName" : "" || this.cursor.Name,
"Email" : this.cursor.Email,
"AddressLine1" : this.cursor.AddressLine1,
"AddressLine2" : this.cursor.AddressLine2,
"City" : this.cursor.City,
"State" : this.cursor.State,
"Zip" : this.cursor.Zip
};
}
var statefulData = getStateful(data);
this.model.splice(idx, 0, statefulData);
ctrlSource.model.splice(idx, 0, statefulData);
}
});
ctrl = new ctrlclz({store: new Memory({data:storeData}), holdModelUntilCommit: true});
ctrlSource = new (declare([ListController], {}))({model: at(ctrl, "sourceModel"), cursorIndex: at(ctrl, "cursorIndex")});
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 9 of test for Controllers, uses an EditStoreRefListController with holdModelUntilCommit: true</h2>
<h2>Select the Shipping Address to use.</h2>
</div>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(ctrlSource, 'model'), partialRebuild:true">
<script type="dojox/mvc/InlineTemplate">
<div>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="AddressName" id="radio${indexAtStartup}"
data-dojo-props="index: ${indexAtStartup},
// value: at('rel:', 'AddressName'), // do not set value on the radio button or it will also set checked.
checked: at('rel:', 'Checked').transform(ctrl.transformRadioChecked)"/>
<label class="radioLabel" for="radio${indexAtStartup}" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'AddressName')"></label> <br />
</div>
</script>
</div>
<div class="fullrow">
<button class="buttoncell" id="add" type="button" data-dojo-type="dijit/form/Button"
data-dojo-props="onClick: function(){ ctrl.addEmpty(true); }">New Address</button>
<button class="buttoncell" id="addcopy" type="button" data-dojo-type="dijit/form/Button"
data-dojo-props="onClick: function(){ ctrl.addEmpty(false); }">New copy of selected.</button>
</div>
<div class="spacer"></div>
<h2>Enter the Shipping Address</h2>
<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(ctrl,'cursor')">
<div class="fullrow">
<label class="cell" for="AddressNameInput">Address Name:</label>
<input class="cell" id="AddressNameInput" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'AddressName')">
</div>
<br/>
<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>
<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 class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(ctrlSource,'cursor')">
<div>
<h2>Verify the shipping address for:
<div class="namecell" id="AddressNameOutput" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'AddressName')"></div>
</h2>
</div>
<div class="fullrow">
<div class="boldnamecell" 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(ctrl.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>
</body>
</html>