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.
189 lines (175 loc) • 7.3 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style>
.adminlistitem {
font-size:12px;
margin-right: 10px;
padding-right: 10px;
line-height: 59px; /* 20px; */
height: 59px;
}
.admin2LineListItem1 {
height: 16px;
color: #222222;
font-weight: bold;
margin: -8px 0px 10px 8px;
}
.admin2LineListItem2 {
height: 16px;
color: #464646;
font-weight: normal;
margin: -13px 0 10px 8px;
}
</style>
<title>MVC WidgetList with EdgeToEdgeList with icons and sub-label</title>
<script type="text/javascript" src="../../../../dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true, async: true, parseOnLoad: false, mvc: {debugBindings: true}"></script>
<script type="text/javascript">
require([
"dojo/_base/lang",
"dijit/registry",
"dojo/parser",
"dojo/store/Memory",
"dojo/ready",
"dojo/when",
"dojox/mvc/EditStoreRefListController",
"dojox/mvc/at",
"dojox/mvc/Group",
"dojox/mvc/Repeat",
"dojox/mvc/Templated",
"dojox/mvc/WidgetList",
"dojox/mvc/Output",
"dojox/mobile",
"dojox/mobile/Button",
"dojox/mobile/TextBox",
"dojox/mobile/CheckBox",
"dojox/mobile/EdgeToEdgeList",
"dojox/mvc/WidgetList",
"dojox/mvc/_InlineTemplateMixin",
"dojox/mobile/deviceTheme"
], function(lang, registry, parser, MemoryStore, ready, when, EditStoreRefListController){
var projects_init1 = {
"identifier": "id",
"items": [
{
"id" : "ID1001",
"label" : "Project 01",
"displayName" : "Project 01",
"shortDesc" : "Short Description for project 01",
"longDesc" : "Long Description for project 01",
"checked" : true,
"icon" : "../images/directory_45.png"
},
{
"id" : "ID1002",
"label" : "Project 02",
"displayName" : "Project 02",
"shortDesc" : "Short Description for project 02",
"longDesc" : "Long Description for project 02",
"checked" : true,
"icon" : "../images/directory_45.png"
},
{
"id" : "ID1003",
"label" : "Project 03",
"displayName" : "Project 03",
"shortDesc" : "Short Description for project 03",
"longDesc" : "Long Description for project 03",
"checked" : false,
"icon" : "../images/directory_45.png"
}
]
};
var memStore1 = new MemoryStore({data : projects_init1});
ctrl = new EditStoreRefListController({store: memStore1});
when(ctrl.queryStore(), function(data){
model1 = ctrl.model;
});
// when "dojo/ready" is ready call parser.parse (if not doing parseOnLoad)
ready(function(){
parser.parse();
});
});
</script>
</head>
<body style="visibility:hidden;">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<script type="dojo/require">registry: "dijit/registry"</script>
<div id="wrapper">
<div id="header">
<div id="navigation"></div>
<div id="headerInsert">
<h4>MVC WidgetList with EdgeToEdgeList with icons and sub-label</h4>
</div>
</div>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<h5>EdgeToEdgeList with a WidgetList with child type of ListItem, sets label, icon and checked and multiple select.</h5>
<ul data-dojo-type="dojox.mobile.EdgeToEdgeList" id="repeatId1B" select="multiple"
data-dojo-mixins="dojox/mvc/WidgetList"
data-mvc-child-type="dojox/mobile/ListItem"
data-mvc-child-props="label: at(this.target, 'displayName'),
icon: at(this.target, 'icon'),
checked: at(this.target, 'checked'),
variableHeight: true"
data-dojo-props="children: model1">
</ul>
<h5>EdgeToEdgeList with a WidgetList with child type of mvc/Templated with ListItem mixin, sets label, icon and checked and multiple select.</h5>
<ul data-dojo-type="dojox.mobile.EdgeToEdgeList" id="repeatId1"
data-dojo-props='select:"multiple", children: model1'
data-dojo-mixins="dojox/mvc/WidgetList,dojox/mvc/_InlineTemplateMixin"
data-mvc-child-type="dojox/mvc/Templated"
data-mvc-child-mixins="dojox/mobile/ListItem"
data-mvc-child-props="clickable: true,
_relTargetProp: 'childTarget', // avoid using target for a ListItem since it uses that
icon: at(this.childTarget, 'icon'), // setting icon: '../images/directory_45.png' works
noArrow: true,
indexAtStartup: this.indexAtStartup,
checked: at(this.childTarget, 'checked'),
onClick: function(e){
console.log(this.id);
console.log(e);
console.log(registry.byId(this.id));
console.log(this.indexAtStartup); return true;}">
<script type="dojox/mvc/InlineTemplate">
<li class="adminlistitem">
<div class="mblListItemLabel">
<div class="admin2LineListItem1" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:','displayName')"></div>
<div class="admin2LineListItem2" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:','shortDesc')"></div>
</div>
</li>
</script>
</ul>
<h5>WidgetList with an mvc/InlineTemplate, you can change the label, or checked here.</h5>
<div id="repeatId2" data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: model1">
<script type="dojox/mvc/InlineTemplate">
<div>
<input class="cell"
data-dojo-type="dojox/mobile/TextBox"
data-dojo-props="value: at('rel:', 'displayName')">
<label for="CBInput${indexAtStartup}"
data-dojo-type="dijit/_WidgetBase"
data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at('rel:', 'displayName')"></label>
<input class="cell" type="checkbox" id="CBInput${indexAtStartup}"
data-dojo-type="dojox/mobile/CheckBox"
data-dojo-props="checked: at('rel:', 'checked')">
</div>
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>