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.
118 lines (115 loc) • 6.74 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 sorted</title>
<script src="../../../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
<script src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false"></script>
<script>
require([
"dojo/dom",
"dijit/registry", // dijit.byId
"doh/runner",
"dojox/mobile/EdgeToEdgeStoreList",
"dojo/store/Observable",
"dojo/store/Memory",
"dojox/mobile/parser", // This mobile app uses declarative programming with fast mobile parser
"dojox/mobile", // This is a mobile app.
"dojox/mobile/View", // This mobile app uses mobile view
"dojox/mobile/compat", // This mobile app supports running on desktop browsers
"dojo/domReady!"
], function(dom, registry, runner, EdgeToEdgeStoreList, Observable, Memory, parser){
var storeData = [{label:"A item", rightText: "A"},
{label:"Z item", rightText: "Z"},
{label:"B item", rightText: "B"},
{label:"Y item", rightText: "Y"},
{label:"C item", rightText: "C"},
{label:"X item", rightText: "X"},
{label:"D item", rightText: "D"},
{label:"W item", rightText: "W"},
{label:"E item", rightText: "E"},
{label:"V item", rightText: "V"},
{label:"F item", rightText: "F"},
{label:"U item", rightText: "U"},
{label:"G item", rightText: "G"},
{label:"T item", rightText: "T"},
{label:"H item", rightText: "H"},
{label:"S item", rightText: "S"},
{label:"I item", rightText: "I"},
{label:"R item", rightText: "R"},
{label:"J item", rightText: "J"},
{label:"Q item", rightText: "Q"},
{label:"K item", rightText: "K"},
{label:"P item", rightText: "P"},
{label:"L item", rightText: "L"},
{label:"O item", rightText: "O"},
{label:"M item", rightText: "M"},
{label:"N item", rightText: "N"}];
var store = Observable(new Memory({data: storeData, idProperty: "label"}));
var updateItemRightText = function(itemLabel, newRightText) {
var item = store.get(itemLabel);
if(item){
item.rightText = newRightText;
store.put(item);
}else{
alert("Cannot find item labelled " + itemLabel);
}
}
parser.parse();
var view = registry.byId("view1");
var demoWidget = new EdgeToEdgeStoreList({id:"list", store:store, query:{}, queryOptions:{sort:[{attribute:"rightText"}]}});
demoWidget.placeAt(view.containerNode);
demoWidget.startup();
dom.byId("updateButton").onclick = function () {
updateItemRightText(dom.byId("labelInput").value, dom.byId("rightTextInput").value);
};
runner.register("EdgeToEdgeList sorted", [
{
name: "Check that #17622 is solved",
timeout: 4000,
runTest: function () {
var list = registry.byId("list");
runner.assertEqual(26, list.domNode.children.length, "The number of list items is not the expected one");
runner.assertEqual("A", list.domNode.children[0].children[0].innerHTML, "First item right text is not the expected one");
runner.assertEqual("A item", list.domNode.children[0].children[1].innerHTML, "First item label is not the expected one");
runner.assertEqual("Z", list.domNode.children[25].children[0].innerHTML, "Last item right text is not the expected one");
runner.assertEqual("Z item", list.domNode.children[25].children[1].innerHTML, "Last item label is not the expected one");
dom.byId("labelInput").value = "Z item";
dom.byId("rightTextInput").value = "A";
dom.byId("updateButton").onclick();
runner.assertEqual(26, list.domNode.children.length, "The number of list items is not the expected one after first update");
runner.assertEqual("A", list.domNode.children[0].children[0].innerHTML, "First item right text is not the expected one after first update");
runner.assertEqual("A item", list.domNode.children[0].children[1].innerHTML, "First item label is not the expected one after first update");
runner.assertEqual("A", list.domNode.children[1].children[0].innerHTML, "Second item right text is not the expected one after first update");
runner.assertEqual("Z item", list.domNode.children[1].children[1].innerHTML, "Second item label is not the expected one after first update");
runner.assertEqual("Y", list.domNode.children[25].children[0].innerHTML, "Last item right text is not the expected one after first update");
runner.assertEqual("Y item", list.domNode.children[25].children[1].innerHTML, "Last item label is not the expected one after first update");
dom.byId("labelInput").value = "Z item";
dom.byId("rightTextInput").value = "Z";
dom.byId("updateButton").onclick();
runner.assertEqual(26, list.domNode.children.length, "The number of list items is not the expected one after second update");
runner.assertEqual("A", list.domNode.children[0].children[0].innerHTML, "First item right text is not the expected one after second update");
runner.assertEqual("A item", list.domNode.children[0].children[1].innerHTML, "First item label is not the expected one after second update");
runner.assertEqual("Z", list.domNode.children[25].children[0].innerHTML, "Last item right text is not the expected one after second update");
runner.assertEqual("Z item", list.domNode.children[25].children[1].innerHTML, "Last item label is not the expected one after second update");
}
}
]);
runner.run();
});
</script>
</head>
<body style="visibility:hidden;">
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1>List sorted by items right text.</h1>
<label for="labelInput">Label:</label>
<input id="labelInput" type="text">
<label for="rightTextInput">New right text:</label>
<input id="rightTextInput" type="text">
<input id="updateButton" type="button" value="update">
<p>
</div>
</body>
</html>