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.
312 lines (289 loc) • 10.9 kB
HTML
<html style="width:100%;height:100%;overflow:hidden;">
<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";
</style>
<!-- required: a default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<style>
.bordercontainer-nopadding .dijitContentPane, .bordercontainer-nopadding .dijitSplitContainer-dijitContentPane, .bordercontainer-nopadding .dijitBorderContainer-dijitContentPane {
padding: 0;
}
.bordercontainer-nopadding .dijitMenuBar {
border-width: 0 0 1px 0;
}
.view .dijitMenu {
border-width: 0;
}
.view .dijitMenuItemHover {
background-color: inherit;
background-image: none;
}
.view .dijitMenuItemSelected {
background-color: #abd6ff;
background-image: url("images/standardGradient.png");
background-repeat: repeat-x;
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
_background-image: none;
}
.view td.dijitMenuItemLabel {
width: 100%;
padding: 6px;
}
.view td.dijitMenuItemIconCell {
padding: 6px;
}
.dijitBorderContainerNoGutter > .form {
padding: 6px;
}
.row {
width: 100%;
display: inline-block;
padding: 6px;
-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cell {
width: 100%;
display:inline-block;
-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.complete {
text-decoration: line-through;
}
</style>
<!-- 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">
var ViewMenuBarData, DetailMenuBarData, initialRows;
var selectionStatusConverter = {
format: function(value){
return this.target.uniqueId == (value || {}).uniqueId;
},
parse: function(value){
if(!value){ throw new Error(); } // Stop copying the new value for unchecked case
for(var a = this.source.inModel, i = 0; i < a.length; i++){
if(a[i].uniqueId == this.target.uniqueId){
return a[i];
}
}
}
}, priorityConverter = {
format: function(value){
return "dijitIcon dijitMenuItemIconCell " + (value <= 1 ? "dijitIconError" : "");
}
}, completeConverter = {
format: function(value){
return "dijitMenuItemLabel" + (value ? " complete" : "");
}
},subjectConverter = {
format: function(value){
return value || "(No subject)";
}
};
require([
"dojox",
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/dom",
"dojo/dom-class",
"dojo/parser",
"dojo/Stateful",
"dijit/registry",
"dijit/Menu",
"dojox/mvc/at",
"dojox/mvc/getStateful",
"dijit/form/CheckBox",
"dijit/form/DateTextBox",
"dijit/form/Select",
"dijit/form/TextBox",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/Editor",
"dijit/MenuBar",
"dijit/MenuBarItem",
"dijit/MenuItem",
"dojox/mvc/_atBindingExtension",
"dojox/mvc/EditModelRefController",
"dojox/mvc/ListController",
"dojox/mvc/StatefulArray",
"dojox/mvc/Group",
"dojox/mvc/Repeat"
], function(dojox, declare, lang, ddom, domClass, parser, Stateful, registry, Menu, at, getStateful){
var uniqueIdSeq = 3;
initialRows = getStateful([
{
uniqueId: 0,
Completed: false,
Subject: "Pick up my kids",
Due: new Date((new Date()).getTime() + 48 * 3600000),
Priority: 1,
Description: "At the kindergarden"
},
{
uniqueId: 1,
Completed: true,
Subject: "Take dojox.mvc learning course",
Due: new Date((new Date()).getTime() + 72 * 3600000),
Priority: 2,
Description: "Need to find course material at http://dojotoolkit.org/"
},
{
uniqueId: 2,
Completed: false,
Subject: "Wash my car",
Due: new Date((new Date()).getTime() + 120 * 3600000),
Priority: 3,
Description: "Need to buy a cleaner before that"
}
]);
ViewMenuBarData = getStateful([
{
label: "New",
onClick: function(){
var ctl = registry.byId("listCtl");
var payload = getStateful({
uniqueId: uniqueIdSeq++,
Completed: false,
Subject: "",
Due: new Date(""),
Priority: 2,
Description: ""
});
ctl.inModel.unshift(payload);
ctl.set("cursor", payload);
}
},
{
label: "Delete",
onClick: function(){
var ctl = registry.byId("listCtl");
if(!confirm("Are you sure you want to delete \"" + ctl.get("Subject") + "\"?")){ return; }
var idx = ctl.get("cursorIndex");
if(idx >= 0){
ctl.inModel.splice(idx, 1);
}
if(idx < ctl.inModel.get("length")){
ctl.set("cursorIndex", idx);
}
}
}
]);
DetailMenuBarData = getStateful([
{
label: "Cancel",
onClick: function(){
var ctl = registry.byId("listCtl");
if(!confirm("Are you sure you want to cancel editing \"" + ctl.get("Subject") + "\"?")){ return; }
ctl.reset();
}
}
]);
domClass.add(ddom.byId("loading"), "dijitDisplayNone");
domClass.remove(ddom.byId("main"), "dijitDisplayNone");
parser.parse();
});
</script>
</head>
<body class="claro" style="width:100%;height:100%;margin:0;padding:0;overflow:hidden;">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<table id="loading" style="width:100%;height:100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">Loading...</td>
</tr>
</tbody>
</table>
<div id="main" class="dijitDisplayNone" style="width:100%;height:100%;">
<span id="listCtl" data-dojo-type="dojox.mvc.ListController" data-dojo-mixins="dojox.mvc.EditModelRefController"
data-dojo-props="_refInModelProp: 'inModel', _refSourceModelProp: 'cursor', _refModelProp: 'model', inModel: initialRows, cursorIndex: 0"></span>
<div class="bordercontainer-nopadding" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="persist: false, gutters: true, style: 'height: 100%; width: 100%;'">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', style: 'background-color: white; width: 48ex', splitter: true">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="persist: false, gutters: false">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
<div data-dojo-type="dojox.mvc.Repeat" data-dojo-mixins="dijit.MenuBar" data-dojo-props="children: ViewMenuBarData">
<div data-dojo-type="dijit.MenuBarItem" data-dojo-props="'*': at('rel:${index}', '*')"></div>
</div>
</div>
<div class="view" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
<table border="0" cellspacing="0" cellpadding="0">
<tbody data-dojo-type="dojox.mvc.Repeat" data-dojo-props="children: at('widget:listCtl', 'inModel')">
<tr data-dojo-type="dijit._WidgetBase" data-dojo-props="target: at('rel:', '${index}')">
<td class="dijitMenuItemIconCell">
<input data-dojo-type="dijit.form.CheckBox"
data-dojo-props="uniqueId: at('rel:', 'uniqueId'),
checked: at('widget:listCtl', 'cursor').transform(selectionStatusConverter)">
</td>
<td class="dijitMenuItemIconCell">
<img src="../../../dojo/resources/blank.gif" data-dojo-type="dijit._WidgetBase"
data-dojo-props="_setDomClassAttr: {node: 'domNode', type: 'class'}, domClass: at('rel:', 'Priority').direction(at.from).transform(priorityConverter)">
</td>
<td data-dojo-type="dijit._WidgetBase"
data-dojo-props="Subject: at('rel:', 'Subject').direction(at.from).transform(subjectConverter),
_setDomClassAttr: {node: 'domNode', type: 'class'}, domClass: at('rel:', 'Completed').direction(at.from).transform(completeConverter),
_setSubjectAttr: {node: 'domNode', type: 'innerText'}">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', style: 'background-color: white;'">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="persist: false, gutters: false">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
<div data-dojo-type="dojox.mvc.Repeat" data-dojo-mixins="dijit.MenuBar" data-dojo-props="children: DetailMenuBarData">
<div data-dojo-type="dijit.MenuBarItem" data-dojo-props="'*': at('rel:${index}', '*')"></div>
</div>
</div>
<div class="form" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', target: at('widget:listCtl', 'model')">
<div class="row">
<span class="cell">
<label for="completed">Completed:</label>
<input id="completed" data-dojo-type="dijit.form.CheckBox" data-dojo-props="checked: at('rel:', 'Completed')">
</span>
</div>
<div class="row">
<label class="cell" for="subject">Subject:</label>
<input class="cell" id="subject" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:', 'Subject')">
</div>
<div class="row">
<label class="cell" for="priority">Priority:</label>
<span class="cell">
<select id="priority" data-dojo-type="dijit.form.Select" data-dojo-props="value: at('rel:', 'Priority')">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
</div>
<div class="row">
<label class="cell" for="due">Due:</label>
<span class="cell">
<input id="due" data-dojo-type="dijit.form.DateTextBox"
data-dojo-props="required: false, constraints: {datePattern: 'MMMM dd yyyy'}, value: at('rel:', 'Due')">
</span>
</div>
<div class="row">
<span class="cell">Description:</span>
<div class="cell" data-dojo-type="dijit.Editor"
data-dojo-props="plugins: ['bold', 'italic', 'underline'], height: '200', value: at('rel:', 'Description')"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>