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.
134 lines (127 loc) • 5.04 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"/>
<title>EdgeToEdgeStoreList - updates</title>
<script type="text/javascript" src="../deviceTheme.js"
data-dojo-config="mblThemeFiles: ['base', 'Button']"></script>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/_base/lang",
"dojo/_base/array",
"dojo/store/Memory",
"dojo/store/Observable",
"dijit/registry",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/EdgeToEdgeStoreList",
"dojox/mobile/Button"
], function(lang, array, Memory, Observable, registry){
var updateCounter = 0;
var static_data1 = [
{ id: 1, text: "Category 1", header: true },
{ id: 2, text: "Wi-Fi", profile_image_url: "images/i-icon-1.png", moveTo: "wifi" },
{ id: 3, text: "Brightness & Wallpaper", profile_image_url: "images/i-icon-2.png", moveTo: "bright" },
{ id: 4, text: "Picture Frame", profile_image_url: "images/i-icon-3.png", moveTo: "picture" },
{ id: 5, text: "General", profile_image_url: "images/i-icon-4.png", moveTo: "general", "selected": "true" },
{ id: 6, text: "Mail, Contacts, Calendars", profile_image_url: "images/i-icon-5.png", moveTo: "wifi" },
{ id: 7, text: "Safari", profile_image_url: "images/i-icon-6.png", moveTo: "bright" },
{ id: 8, text: "iPod", profile_image_url: "images/i-icon-7.png", moveTo: "picture" },
{ id: 9, text: "Category 2", header: true },
{ id: 10, text: "Video", profile_image_url: "images/i-icon-8.png", moveTo: "general" },
{ id: 11, text: "Photos", profile_image_url: "images/i-icon-9.png", moveTo: "wifi" },
{ id: 12, text: "Store", profile_image_url: "images/i-icon-10.png", moveTo: "bright" }
];
var static_data2 = [
{id: 1, label: "Apple", moveTo: "dummy"},
{id: 2, label: "Banana", moveTo: "dummy"},
{id: 3, label: "Cherry", moveTo: "dummy"},
{id: 4, label: "Grape", moveTo: "dummy"},
{id: 5, label: "Kiwi", moveTo: "dummy"},
{id: 6, label: "Lemon", moveTo: "dummy"},
{id: 7, label: "Melon", moveTo: "dummy"},
{id: 8, label: "Orange", moveTo: "dummy"},
{id: 9, label: "Peach", moveTo: "dummy"}
];
store1 = Observable(new Memory({data: static_data1}));
store2 = Observable(new Memory({data: static_data2}));
store1.__counter = store2.__counter = 1;
store = store1;
// switch to the selected store
switchTo = function(store){
window.store = store;
registry.byId("list").setStore(store);
};
// add a new item
add1 = function(){
store.add({
id: 100 + store.__counter,
label: "New Item "+(store.__counter++),
icon: "images/i-icon-1.png",
moveTo: "dummy"
});
};
// update the text or label of all items
var updateSuffix = " update #";
var updateUtil = function(str){
// Skip the category items (for aesthetic reasons)
if(str.indexOf("Category") == 0){
return str;
}
var idx = str.indexOf(updateSuffix);
return idx >= 0 ?
// already updated: just update the counter
str.substring(0, idx) + updateSuffix + updateCounter :
// first update: append to str
str + updateSuffix + updateCounter;
};
update1 = function(){
updateCounter++;
array.forEach(store.query({}), function(item, i){
// Changes of the data items of the store must only be done
// through the API of the store. Hence the cloning.
var newItem = lang.clone(item);
if(newItem.text){
newItem.text = updateUtil(newItem.text);
}else{
newItem.label = updateUtil(newItem.label)
}
store.put(newItem);
});
};
// delete the added item
delete1 = function(){
if(store.__counter > 1){
store.remove(100 + (--store.__counter));
}
};
});
</script>
</head>
<body style="visibility:hidden;">
<div data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">EdgeToEdgeStoreList</h1>
<ul data-dojo-type="dojox/mobile/EdgeToEdgeStoreList" id="list"
data-dojo-props='store: store, query: {}, itemMap: {text:"label", profile_image_url: "icon"}'>
</ul>
<p>Select the data store:<br>
<input data-dojo-type="dojox/mobile/Button" type="button" value="Set1"
onclick="switchTo(store1)">
<input data-dojo-type="dojox/mobile/Button" type="button" value="Set2"
onclick="switchTo(store2)">
<p>Alter the data store:<br>
<input data-dojo-type="dojox/mobile/Button" type="button" value="Add"
onclick="add1()">
<input data-dojo-type="dojox/mobile/Button" type="button" value="Update"
onclick="update1()">
<input data-dojo-type="dojox/mobile/Button" type="button" value="Delete"
onclick="delete1()">
</div>
</body>
</html>