How to create custom List item dynamically with Dojo?
Question
You can copy/paste the following code in Notepad or whatever :
<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<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" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojox/mobile/parser",
"dijit/registry",
"dojox/mobile/deviceTheme",
"dojox/mobile",
"dojo/domReady!"],function(parser,registry){
parser.parse();
var list = registry.byId("list");
for(var i = 0;i < 18;i++){
var childWidget = new dojox.mobile.ListItem({id:"item"+i,
label:"ITEM"+i});
list.addChild(childWidget);
}
document.getElementById("item0").style.backgroundColor = "red";
document.getElementById("item1").style.backgroundColor = "green";
});
</script>
</head>
<body>
<div id="settings" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
<!-- a sample heading -->
<h1 data-dojo-type="dojox.mobile.Heading">Settings</h1>
<!-- a rounded rectangle list container -->
<ul data-dojo-type="dojox.mobile.RoundRectList" id="list">
</ul>
</div>
<div id="article" data-dojo-type="dojox.mobile.View">
<!-- a sample heading -->
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back: "settings",moveTo: "settings"'>Article</h1>
This is the article view
</div>
</body>
</html>
However the part of the code I'm struggling with is :
<script type="text/javascript">
require(["dojox/mobile/parser",
"dijit/registry",
"dojox/mobile/deviceTheme",
"dojox/mobile",
"dojo/domReady!"],function(parser,registry){
parser.parse();
var list = registry.byId("list");
for(var i = 0;i < 18;i++){
var childWidget = new dojox.mobile.ListItem({id:"item"+i,
label:"ITEM"+i});
list.addChild(childWidget);
}
document.getElementById("item0").style.backgroundColor = "red";
document.getElementById("item1").style.backgroundColor = "green";
});
</script>
As you can see ListItems are created dynamically like this :
var childWidget = new dojox.mobile.ListItem({id:"item"+i,label:"ITEM"+i});
What I'd like to do is to put a background color at the creation of the ItemList instead of putting it after as you can see the 2 lines with "red" and "green".
So I'm looking for something like this :
var childWidget = new dojox.mobile.ListItem({id:"item"+i,label:"ITEM"+i,style=????});
But there isn't such a style property.
Properties here btw.
Is it possible to do it ?
Thank you in advance.
1 answers
solution1
1 ACCPTED 2015-05-19 08:30:42
First I would recommend you to add ListItem to your AMD dependency list and use it just as any other AMD module:
require(["dojox/mobile/ListItem"], function(ListItem) {
new ListItem(...);
});
and not through the old dojox.mobile notation.
For your styling issue, the solution your are hinting at can actually be applied, ListItem are inheriting for dijit/_WidgetBase and as such will support the style property. Something like the following should work:
new ListItem({id: "theid", label: "thelabel", style: "background-color: red"});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.