Updated
This commit is contained in:
104
master/examples/test_Android-repeat-data-store.html
Normal file
104
master/examples/test_Android-repeat-data-store.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<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>Android Repeat Data Example</title>
|
||||
<link href="../../../../dojox/mobile/themes/android/android.css" rel="stylesheet"/>
|
||||
<link href="../css/android-format.css" rel="stylesheet"/>
|
||||
|
||||
<!-- use below for iPhone theme
|
||||
<link href="../../../../dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"></link>
|
||||
<link href="../css/iphone-format.css" rel="stylesheet"></link>
|
||||
-->
|
||||
|
||||
<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="parseOnLoad: false, isDebug: true"></script>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
//dojo.require("dojo.parser");
|
||||
dojo.require("dojox.mobile.parser"); // dojox.mobile.parser did not work
|
||||
dojo.require("dojox.mobile");
|
||||
dojo.require("dojox.mobile.TextBox");
|
||||
dojo.require("dojox.mobile.Button");
|
||||
dojo.require("dojox.mvc");
|
||||
dojo.require("dojox.mvc.Group");
|
||||
dojo.require("dojox.mvc.Repeat");
|
||||
dojo.require("dojo.data.ItemFileWriteStore");
|
||||
dojo.require("dojo.store.DataStore");
|
||||
|
||||
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
|
||||
|
||||
var model, selectedIndex = 0, nextIndexToAdd, theModelPromise;
|
||||
|
||||
function setup() {
|
||||
var writeStore = new dojo.data.ItemFileWriteStore({url: dojo.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")});
|
||||
var modelPromise = dojox.mvc.newStatefulModel({store: new dojo.store.DataStore({store: writeStore}), query:{"Location" : "CA"}}); // example of using a query parm for Location
|
||||
modelPromise.then(function(results){
|
||||
model = results;
|
||||
nextIndexToAdd = model.data.length;
|
||||
//dojo.parser.parse();
|
||||
dojox.mobile.parser.parse();
|
||||
});
|
||||
};
|
||||
|
||||
dojo.ready(setup);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 dojoType="dojox.mobile.Heading">Android Repeat Data Binding Example.</h1>
|
||||
<div >Search Results:</div>
|
||||
<div dojoType="dojox.mvc.Repeat" class="row" ref="model">
|
||||
<div class="row" dojoType="dojox.mvc.Group" ref="'rel:${this.index}'">
|
||||
<input dojoType="dojox.mobile.TextBox"
|
||||
id="nameInput${this.index}" ref="'rel:First'" placeHolder="First Name"/>
|
||||
<button id="details${this.index}" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setDetailsContext('${this.index}')">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div dojoType="dojox.mvc.Group" ref="model">
|
||||
<div id="detailsBanner">Details for selected index:</div>
|
||||
<div id="detailsGroup" dojoType="dojox.mvc.Group" ref="'rel:0'">
|
||||
<div><label for="firstInput">First Name:</label></div>
|
||||
<div><input id="firstInput" dojoType="dojox.mobile.TextBox" ref="'rel:First'" placeHolder="First Name"/></div>
|
||||
<div><label for="lastInput">Last Name:</label></div>
|
||||
<div><input id="lastInput" dojoType="dojox.mobile.TextBox" ref="'rel:Last'" placeHolder="Last Name"/></div>
|
||||
<div><label for="emailInput">Email:</label></div>
|
||||
<div><input id="emailInput" dojoType="dojox.mobile.TextBox" ref="'rel:Email'" placeHolder="Email"/></div>
|
||||
<div><label for="telInput">Telephone:</label></div>
|
||||
<div><input id="telInput" dojoType="dojox.mobile.TextBox" ref="'rel:Tel'" placeHolder="Telephone"/></div>
|
||||
<div><label for="faxInput">Fax:</label></div>
|
||||
<div><input id="faxInput" dojoType="dojox.mobile.TextBox" ref="'rel:Fax'" placeHolder="Fax"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<button id="add" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="insertResult(nextIndexToAdd)">Add</button>
|
||||
<button id="save" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="console.log(model[selectedIndex].toPlainObject());model[selectedIndex].commit()">Save</button>
|
||||
<button id="reset" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="model.reset()">Reset</button>
|
||||
<script type="text/javascript">
|
||||
function setDetailsContext(index){
|
||||
selectedIndex = index;
|
||||
var groupRoot = dijit.byId("detailsGroup");
|
||||
groupRoot.set("ref", index);
|
||||
}
|
||||
|
||||
function insertResult(index){
|
||||
if (model[index-1].First.value !== ""){ // TODO: figure out why we are getting called twice for each click
|
||||
var insert = dojox.mvc.newStatefulModel({ "data" : {
|
||||
"First" : "",
|
||||
"Last" : "",
|
||||
"Location": "CA",
|
||||
"Office" : "",
|
||||
"Email" : "",
|
||||
"Tel" : "",
|
||||
"Fax" : ""}
|
||||
});
|
||||
model.add(index, insert);
|
||||
setDetailsContext(index);
|
||||
nextIndexToAdd++;
|
||||
}else{
|
||||
setDetailsContext(index-1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user