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.
214 lines (201 loc) • 8.08 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Nested WidgetList example</title>
<script src="../../../../dojo/dojo.js" type="text/javascript"
data-dojo-config="parseOnLoad: 0, isDebug: true, mvc: {debugBindings: true}"></script>
<style type="text/css">
@import "../css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript">
var ctrl;
require(["dojo/_base/declare", "dojo/when", "dojo/parser", "dojo/Stateful", "dojo/store/JsonRest", "dojo/_base/kernel",
"dijit/registry", "dojox/mvc/EditStoreRefListController", "dijit/form/Button", "dijit/form/TextBox", "dijit/form/ComboBox",
"dojox/mvc/Group", "dojox/mvc/Output", "dojox/mvc/Templated", "dojox/mvc/WidgetList", "dojo/domReady!"],
function(declare, when, parser, Stateful, JsonRest, kernel, registry, EditStoreRefListController) {
var inited, ctrlClass = declare([EditStoreRefListController], {
cursorIndex : 0,
group : "",
groupTyped : "",
_refModelProp : "model",
addEmpty : function() {
this.model.push(new Stateful({
id : Math.random(),
Group : this.groupTyped,
First : "",
Last : "",
Location : "",
Office : "",
Email : "",
Tel : [{
"name" : "Home",
"number" : ""
}]
}));
this.set("cursorIndex", this.get("length") - 1);
},
remove : function(idx) {
this.model.splice(idx, 1);
if (this.get("cursorIndex") < 0) {
this.set("cursorIndex", this.get("length") - 1);
}
},
phoneAddEmpty : function() {
this.cursor.Tel.push(new Stateful({
"name" : "Home",
"number" : ""
}));
// this is needed for when a new person is added, those phones would not be added correctly without this
registry.byId("telRepeat").set("children", at('rel:', 'Tel'));
registry.byId("emailInput").focus();
// this is done to force it to scroll to the bottom so you can see that it was added.
},
phoneRemove : function(idx) {
this.cursor.Tel.splice(idx, 1);
registry.byId("telRepeat").set("children", at('rel:', 'Tel'));
},
_setGroupAttr : function(value) {
this.set("groupTyped", value);
var old = this.group;
if (old === value) {
return;
}
when(this.queryStore({
Group : value
}), function() {
if (!inited) {
parser.parse();
inited = true;
}
});
this._set("group", value);
}
});
ctrl = new ctrlClass({
store : new JsonRest({
target : kernel.moduleUrl("dojox.mvc.tests._data", "jsonRestRepeatData.json")
})
});
ctrl.set("group", "Engineer");
});
</script>
</head>
<body class="claro" style="background-image: url(../images/master_detail.png)">
<script type="dojo/require">
at: "dojox/mvc/at"
</script>
<div id="wrapper">
<div id="header">
<div id="navigation"></div>
<div id="headerInsert">
<h1>Nested WidgetLists</h1>
<h2>Nested WidgetLists one for the people and one for their phones, select person and use Details to add or remove a phone.</h2>
</div>
</div>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<div class="fullrow">
<div class="spacer"></div>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ ctrl.commit(); }">
Commit All
</button>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ ctrl.reset(); }">
Reset to last saved
</button>
</div>
<div class="spacer"></div>
<div id="searchBanner">
People with multiple phone numbers:
</div>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(ctrl, 'model')">
<script type="dojox/mvc/InlineTemplate">
<div>
<label class="fixedcell" for="nameInput${indexAtStartup}">Name:</label>
<input class="fixedcell" data-dojo-type="dijit.form.TextBox" id="nameInput${indexAtStartup}"
data-dojo-props="value: at('rel:', 'First')">
<button type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){ ctrl.set('cursorIndex', ${indexAtStartup}); }">Details</button>
<button type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){ ctrl.addEmpty(); }">+</button>
<button type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){ ctrl.remove(${indexAtStartup}); }">-</button>
<!-- try to add nested widgetList here -->
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at('rel:', 'Tel')">
<script type="dojox/mvc/InlineTemplate">
<div>
<div class="fullrow">
<div class="fixedcell"></div>
<label class="fixedcell" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:', 'name')"></label>
<input class="fixedcell" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'number')">
</div>
</script>
</div>
</div>
</script>
<div class="spacer"></div>
<div class="fullrow">
<div id="detailsBanner" class="fullrow">
<div class="fixedcell"></div>
<div class="fixedcell">
Details for result index:
</div>
<span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(ctrl, 'cursorIndex')"></span>
</div>
</div>
<div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'cursor')">
<div class="fullrow">
<label class="fixedcell" for="firstInput">First Name:</label>
<input class="fixedcell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'First')">
</div>
<div class="fullrow">
<label class="fixedcell" for="lastInput">Last Name:</label>
<input class="fixedcell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Last')">
</div>
<div class="fullrow">
<label class="fixedcell" for="locationInput">Location:</label>
<input class="fixedcell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Location')">
</div>
<div class="fullrow">
<label class="fixedcell" for="officeInput">Office:</label>
<input class="fixedcell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Office')">
</div>
<div class="fullrow">
<label class="fixedcell">Phones:</label>
<button type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){ ctrl.phoneAddEmpty(); }">
+
</button>
</div>
<div data-dojo-type="dojox/mvc/WidgetList" id="telRepeat"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at('rel:', 'Tel')">
<script type="dojox/mvc/InlineTemplate">
<div>
<div class="fullrow">
<div class="fixedcell"></div>
<input class="fixedcell" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'name')">
<input class="fixedcell" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'number')">
<button type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){ ctrl.phoneRemove(${indexAtStartup}); }">-</button>
</div>
</div>
</script>
</div>
<div class="fullrow">
<label class="fixedcell" for="emailInput">Email:</label>
<input class="fixedcell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Email')">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>