| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|---|
| 5 | <title>Static Master/Detail Pattern -- Multiple Address Detail example</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "css/app-format.css"; |
|---|
| 8 | @import "../../../dijit/themes/claro/claro.css"; |
|---|
| 9 | </style> |
|---|
| 10 | <script type="text/javascript"> |
|---|
| 11 | require = { |
|---|
| 12 | parseOnLoad: 0, |
|---|
| 13 | isDebug: 1, |
|---|
| 14 | async: 1, |
|---|
| 15 | mvc: {debugBindings: 1} |
|---|
| 16 | }; |
|---|
| 17 | </script> |
|---|
| 18 | <script type="text/javascript" src="../../../dojo/dojo.js"></script> |
|---|
| 19 | <script type="text/javascript"> |
|---|
| 20 | require([ |
|---|
| 21 | "dojo/parser", |
|---|
| 22 | "dojox/mvc/getStateful", |
|---|
| 23 | "dojox/mvc/ListController", |
|---|
| 24 | "dijit/form/Button", |
|---|
| 25 | "dijit/form/TextBox", |
|---|
| 26 | "dojox/mvc/Group", |
|---|
| 27 | "dojox/mvc/Repeat", |
|---|
| 28 | "dojo/domReady!" |
|---|
| 29 | ], function(parser, getStateful, ListController){ |
|---|
| 30 | ctrl = new ListController({ |
|---|
| 31 | model: getStateful([ |
|---|
| 32 | { |
|---|
| 33 | First: "Anne", |
|---|
| 34 | Last: "Ackerman", |
|---|
| 35 | Location: "NY", |
|---|
| 36 | Office: "1S76", |
|---|
| 37 | Email: "a.a@test.com", |
|---|
| 38 | Tel: "123-764-8237", |
|---|
| 39 | Fax: "123-764-8228" |
|---|
| 40 | }, |
|---|
| 41 | { |
|---|
| 42 | First: "Ben", |
|---|
| 43 | Last: "Beckham", |
|---|
| 44 | Location: "NY", |
|---|
| 45 | Office: "5N47", |
|---|
| 46 | Email: "b.b@test.com", |
|---|
| 47 | Tel: "123-764-8599", |
|---|
| 48 | Fax: "123-764-8600" |
|---|
| 49 | }, |
|---|
| 50 | { |
|---|
| 51 | First: "Chad", |
|---|
| 52 | Last: "Chapman", |
|---|
| 53 | Location: "CA", |
|---|
| 54 | Office: "1278", |
|---|
| 55 | Email: "c.c@test.com", |
|---|
| 56 | Tel: "408-764-8237", |
|---|
| 57 | Fax: "408-764-8228" |
|---|
| 58 | }, |
|---|
| 59 | { |
|---|
| 60 | First: "Irene", |
|---|
| 61 | Last: "Ira", |
|---|
| 62 | Location: "NJ", |
|---|
| 63 | Office: "F09", |
|---|
| 64 | Email: "i.i@test.com", |
|---|
| 65 | Tel: "514-764-6532", |
|---|
| 66 | Fax: "514-764-7300" |
|---|
| 67 | }, |
|---|
| 68 | { |
|---|
| 69 | First: "John", |
|---|
| 70 | Last: "Jacklin", |
|---|
| 71 | Location: "CA", |
|---|
| 72 | Office: "6701", |
|---|
| 73 | Email: "j.j@test.com", |
|---|
| 74 | Tel: "408-764-1234", |
|---|
| 75 | Fax: "408-764-4321" |
|---|
| 76 | } |
|---|
| 77 | ]), |
|---|
| 78 | cursorIndex: 0 |
|---|
| 79 | }); |
|---|
| 80 | |
|---|
| 81 | parser.parse(); |
|---|
| 82 | }); |
|---|
| 83 | </script> |
|---|
| 84 | </head> |
|---|
| 85 | <body class="claro" style="background-image: url(images/master_detail.png)"> |
|---|
| 86 | <script type="dojo/require">at: "dojox/mvc/at"</script> |
|---|
| 87 | <div id="wrapper"> |
|---|
| 88 | <div id="header"> |
|---|
| 89 | <div id="navigation"></div> |
|---|
| 90 | <div id="headerInsert"> |
|---|
| 91 | <h1>Master Detail Example - With repeat container</h1> |
|---|
| 92 | </div> |
|---|
| 93 | </div> |
|---|
| 94 | <div id="main"> |
|---|
| 95 | <div id="leftNav"></div> |
|---|
| 96 | <div id="mainContent"> |
|---|
| 97 | <div data-dojo-type="dojox.mvc.Repeat" data-dojo-props="children: at(ctrl, 'model')"> |
|---|
| 98 | <div> |
|---|
| 99 | <label class="cell" for="nameInput${this.index}">Name:</label> |
|---|
| 100 | <input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="value: at('rel:${index}', 'First')"> |
|---|
| 101 | <button type="button" data-dojo-type="dijit.form.Button" |
|---|
| 102 | data-dojo-props="onClick: function(){ ctrl.set('cursorIndex', ${this.index}); }">Details</button> |
|---|
| 103 | </div> |
|---|
| 104 | </div> |
|---|
| 105 | <div class="spacer"></div> |
|---|
| 106 | <div id="detailsBanner"> |
|---|
| 107 | Details for result index: |
|---|
| 108 | <span data-dojo-type="dijit._WidgetBase" |
|---|
| 109 | data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at(ctrl, 'cursorIndex')"></span> |
|---|
| 110 | </div> |
|---|
| 111 | <div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'cursor')"> |
|---|
| 112 | <div class="row"> |
|---|
| 113 | <label class="cell" for="firstInput">First Name:</label> |
|---|
| 114 | <input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'First')"> |
|---|
| 115 | </div> |
|---|
| 116 | <div class="row"> |
|---|
| 117 | <label class="cell" for="lastInput">Last Name:</label> |
|---|
| 118 | <input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Last')"> |
|---|
| 119 | </div> |
|---|
| 120 | <div class="row"> |
|---|
| 121 | <label class="cell" for="officeInput">Office:</label> |
|---|
| 122 | <input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Office')"> |
|---|
| 123 | </div> |
|---|
| 124 | <div class="row"> |
|---|
| 125 | <label class="cell" for="emailInput">Email:</label> |
|---|
| 126 | <input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Email')"> |
|---|
| 127 | </div> |
|---|
| 128 | <div class="row"> |
|---|
| 129 | <label class="cell" for="telInput">Telephone:</label> |
|---|
| 130 | <input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Tel')"> |
|---|
| 131 | </div> |
|---|
| 132 | <div class="row"> |
|---|
| 133 | <label class="cell" for="faxInput">Fax:</label> |
|---|
| 134 | <input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Fax')"> |
|---|
| 135 | </div> |
|---|
| 136 | </div> |
|---|
| 137 | </div> |
|---|
| 138 | </div> |
|---|
| 139 | </div> |
|---|
| 140 | </body> |
|---|
| 141 | </html> |
|---|
