105 lines
4.8 KiB
HTML
105 lines
4.8 KiB
HTML
<!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>
|