65 lines
1.9 KiB
HTML
65 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Simple programmatic data binding - Toggle example</title>
|
|
|
|
<script src="../../../dojo/dojo.js"
|
|
type="text/javascript"
|
|
djConfig="parseOnLoad: true, isDebug: true">
|
|
</script>
|
|
<style type="text/css">
|
|
@import "css/app-format.css";
|
|
@import "../../../dijit/themes/claro/claro.css";
|
|
</style>
|
|
<script type="text/javascript" >
|
|
dojo.require("dojox.mvc");
|
|
dojo.require("dijit.form.TextBox");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dojo.parser");
|
|
|
|
// Function below shows programmatic creation of data-bound dijits
|
|
function addBoundDijits(){
|
|
var model = dojox.mvc.newStatefulModel({ data: { first: "John", last: "Doe" }});
|
|
|
|
var fn = new dijit.form.TextBox({id: "fn", ref: model.first});
|
|
fn.placeAt(dojo.byId("mainContent"));
|
|
fn.startup();
|
|
|
|
var ln = new dijit.form.TextBox({id: "ln", ref: model.last});
|
|
ln.placeAt(dojo.byId("mainContent"));
|
|
ln.startup();
|
|
}
|
|
|
|
// Function below shows programmatic update of data-bound dijit refs
|
|
function toggleRefs(){
|
|
var fn = dijit.byId("fn"), ln = dijit.byId("ln");
|
|
var ref = fn.get("ref");
|
|
fn.set("ref", ln.get("ref"));
|
|
ln.set("ref", ref);
|
|
}
|
|
|
|
dojo.addOnLoad(addBoundDijits);
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<div id="navigation">
|
|
</div>
|
|
<div id="headerInsert">
|
|
<h1>Toggle</h1>
|
|
<h2>Simple Example - Programmatic data binding.</h2>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div id="leftNav">
|
|
</div>
|
|
<div id="mainContent">
|
|
<button id="toggle" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: toggleRefs">Toggle Refs</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|