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.
236 lines
7.4 KiB
236 lines
7.4 KiB
<!DOCTYPE html> |
|
<html style="width: 100%; height: 100%;"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Dojo Repeat Selection Test</title> |
|
|
|
<style type="text/css"> |
|
@import "../../../dijit/themes/dijit.css"; |
|
@import "../../../dijit/themes/claro/document.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
@import "css/app-format.css"; |
|
</style> |
|
|
|
<!-- required: a default dijit theme: --> |
|
<link id="themeStyles" rel="stylesheet" |
|
href="../../../dijit/themes/claro/claro.css" /> |
|
|
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" |
|
data-dojo-config="isDebug: true, async: true, mvc: {debugBindings: true}"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/parser", |
|
"dijit/registry", |
|
"dojox/mvc/getStateful", |
|
"dojox/mvc/_atBindingExtension", |
|
"dojox/mvc/ListController", |
|
"dojox/mvc/StatefulArray", |
|
"dojox/mvc/Group", |
|
"dojox/mvc/Output", |
|
"dojox/mvc/Repeat", |
|
"dijit/form/Button", |
|
"dijit/form/TextBox" |
|
], |
|
function(parser, registry, getStateful){ |
|
|
|
setDetailsContext=function(index){ |
|
var ctl=registry.byId("listCtl"); |
|
ctl.set("cursorIndex", index); |
|
}; |
|
|
|
searchRecords=getStateful({ |
|
"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" : "David", |
|
"Last" : "Durham", |
|
"Location" : "NJ", |
|
"Office" : "C12", |
|
"Email" : "d.d@test.com", |
|
"Tel" : "514-764-8237", |
|
"Fax" : "514-764-8228" |
|
}, { |
|
"First" : "Emma", |
|
"Last" : "Eklof", |
|
"Location" : "NY", |
|
"Office" : "4N76", |
|
"Email" : "e.e@test.com", |
|
"Tel" : "123-764-1234", |
|
"Fax" : "123-764-4321" |
|
}, { |
|
"First" : "Fred", |
|
"Last" : "Fisher", |
|
"Location" : "NJ", |
|
"Office" : "V89", |
|
"Email" : "f.f@test.com", |
|
"Tel" : "514-764-8567", |
|
"Fax" : "514-764-8000" |
|
}, { |
|
"First" : "George", |
|
"Last" : "Garnett", |
|
"Location" : "NY", |
|
"Office" : "7S11", |
|
"Email" : "gig@test.com", |
|
"Tel" : "123-999-8599", |
|
"Fax" : "123-999-8600" |
|
}, { |
|
"First" : "Hunter", |
|
"Last" : "Huffman", |
|
"Location" : "CA", |
|
"Office" : "6532", |
|
"Email" : "h.h@test.com", |
|
"Tel" : "408-874-8237", |
|
"Fax" : "408-874-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" |
|
}] |
|
}); |
|
|
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro" |
|
style="width: 100%; height: 100%; margin: 0; padding: 0;"> |
|
<script type="dojo/require">at: "dojox/mvc/at"</script> |
|
<span id="listCtl" data-dojo-type="dojox.mvc.ListController" |
|
data-dojo-props="model: searchRecords.Results, cursorIndex: 0"></span> |
|
<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 target attribute for the outermost container obtains the binding from the |
|
"page scope" itself. |
|
--> |
|
<div data-dojo-type="dojox.mvc.Group" |
|
data-dojo-props="target: 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="value: at('rel:', 'Query')" /> |
|
<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 |
|
listCtl cursor or cursorIndex for the iteration. |
|
--> |
|
<div data-dojo-type="dojox.mvc.Repeat" |
|
data-dojo-props="children: at('rel:', 'Results')"> |
|
<div class="row" data-dojo-type="dojox.mvc.Group" |
|
data-dojo-props="target: at('rel:${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="value: at('rel:', 'First')"> |
|
<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="target: at('widget:listCtl', 'cursor')"> |
|
<div class="row"> |
|
<div style="display: inline-block;" id="detailsBanner">Details for result index:</div> |
|
<span class="cell" id="indexOutput" |
|
data-dojo-type="dojox.mvc.Output" |
|
data-dojo-props="value: at('widget:listCtl', 'cursorIndex')"></span> |
|
</div> |
|
<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="value: at('rel:', 'First')"> |
|
</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="value: at('rel:', 'Last')"> |
|
</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="value: at('rel:', 'Location')"> |
|
</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="value: at('rel:', 'Office')"> |
|
</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="value: at('rel:', 'Email')"> |
|
</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="value: at('rel:', 'Tel')"> |
|
</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="value: at('rel:', 'Fax')"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|