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.
194 lines (179 loc) • 6.57 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Static Master/Detail Pattern -- Multiple Address Detail example</title>
<style type="text/css">
@import "css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad:0,isDebug:1,async:1" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
/*
*/
var model;
var searchRecords;
require([
'dojo/parser', // has to be first?
'dojox/mvc',
'dojox/mvc/Group',
'dojox/mvc/Repeat',
'dijit/form/TextBox',
'dijit/form/Button'], function(){
// Raw records for the master detail
var search_results_init =
{
"Query" : "Engineers",
"Results" : [
{
"First" : "Anne",
"Last" : "Ackerman",
"Location": "NY",
"Office" : "1S76",
"Email" : "a.a@test.com",
"Tel" : "123-764-8237",
"Fax" : "123-764-8228"
},
{
"First" : "Ben",
"Last" : "Beckham",
"Location": "NY",
"Office" : "5N47",
"Email" : "b.b@test.com",
"Tel" : "123-764-8599",
"Fax" : "123-764-8600"
},
{
"First" : "Chad",
"Last" : "Chapman",
"Location": "CA",
"Office" : "1278",
"Email" : "c.c@test.com",
"Tel" : "408-764-8237",
"Fax" : "408-764-8228"
},
{
"First" : "Irene",
"Last" : "Ira",
"Location": "NJ",
"Office" : "F09",
"Email" : "i.i@test.com",
"Tel" : "514-764-6532",
"Fax" : "514-764-7300"
},
{
"First" : "John",
"Last" : "Jacklin",
"Location": "CA",
"Office" : "6701",
"Email" : "j.j@test.com",
"Tel" : "408-764-1234",
"Fax" : "408-764-4321"
}
]
};
// 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.
searchRecords = dojox.mvc.newStatefulModel({ data : search_results_init });
require([
'dojo/domReady!'
], function(){
dojo.parser.parse();
});
}); // end onload
</script>
</head>
<body class="claro" style="background-image: url(images/master_detail.png)">
<div id="wrapper">
<div id="header">
<div id="navigation">
</div>
<div id="headerInsert">
<h1>Employee Search</h1>
<h2>Master Detail Example - With repeat 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 data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'searchRecords'">
<div class="row">
<label class="cell" for="queryInput">Search for:</label>
<input class="cell" id="queryInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Query'"></input>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setSearchBanner();}">Search</button>
</div>
<div class="spacer"></div>
<div id="searchBanner">Search Results for term: Engineers</div>
<!--
The repeat container denotes a templated UI that operates over a collection
of data records.
The UI can be customized for each iteration using properties such as
${this.index} for the iteration index.
-->
<div data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'Results'">
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
<label class="cell" for="nameInput${this.index}">Name:</label>
<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="ref: 'First'"></input>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setDetailsContext('${this.index}');}">Details</button>
</div>
</div>
<div class="spacer"></div>
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Results'">
<div id="detailsBanner">Details for result index: 0</div>
<div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '0'">
<div class="row">
<label class="cell" for="firstInput">First Name:</label>
<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'First'"></input>
</div>
<div class="row">
<label class="cell" for="lastInput">Last Name:</label>
<input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"></input>
</div>
<!-- <div class="row">
<label class="cell" for="locationInput">Location:</label>
<input class="cell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Location'"></input>
</div>
-->
<div class="row">
<label class="cell" for="officeInput">Office:</label>
<input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Office'"></input>
</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'"></input>
</div>
<div class="row">
<label class="cell" for="telInput">Telephone:</label>
<input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Tel'"></input>
</div>
<div class="row">
<label class="cell" for="faxInput">Fax:</label>
<input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Fax'"></input>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function setDetailsContext(index) {
var widget = dijit.byId("detailsGroup");
widget.set("ref", index);
var detailsBanner = dojo.byId("detailsBanner");
detailsBanner.innerHTML = "Details for result index: " + index;
}
function setSearchBanner() {
var searchBanner = dojo.byId("searchBanner");
searchBanner.innerHTML = "Search Results for term: " + searchRecords.Query.get("value");
}
</script>
</body>
</html>