ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
master/examples/test_mvc_ref-kitchensink.html
+160
View File
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Data binding -- Ref kitchen sink 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("dojox.mvc.Group");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
// Initial data
var order = {
"Serial" : "360324",
"First" : "John",
"Last" : "Doe",
"Email" : "jdoe@example.com",
"ShipTo" : {
"Street" : "123 Valley Rd",
"City" : "Katonah",
"State" : "NY",
"Zip" : "10536"
},
"BillTo" : {
"Street" : "17 Skyline Dr",
"City" : "Hawthorne",
"State" : "NY",
"Zip" : "10532"
}
};
// This example is an odd mix of everything, being the kitchen sink example :-)
// The dojox.mvc.StatefulModel class creates a data model instance, which will be
// shared by widgets being instantiated programmatically as well as
// declaratively
var model = dojox.mvc.newStatefulModel({ data : order });
// Here is programmatic data bound widget instantiation
function addBoundDijits(){
// Absolute ref, passed as object
var serial = new dijit.form.TextBox({id: "serialInput", ref: model.Serial});
serial.placeAt(dojo.byId("serialDiv"));
serial.startup();
// Relative refs, passed as strings
var fn = new dijit.form.TextBox({id: "firstnameInput", ref: "First"});
fn.placeAt(dojo.byId("firstnameDiv"));
fn.startup();
var ln = new dijit.form.TextBox({id: "lastnameInput", ref: "Last"});
ln.placeAt(dojo.byId("lastnameDiv"));
ln.startup();
}
dojo.addOnLoad(addBoundDijits);
</script>
</head>
<body class="claro">
<div id="wrapper">
<div id="header">
<div id="navigation">
</div>
<div id="headerInsert">
<h1>Data Binding</h1>
<h2>Ref kitchen sink example - all ways to specify refs, mixed bag on purpose.</h2>
</div>
</div>
<div id="main">
<div id="leftNav">
</div>
<div id="mainContent">
<!--
Following group shows first example of declarative usage. Its child
dijits are added programmatically.
Here, the ref points to the application space "model" variable (can
be any dot-separated expression).
-->
<div class="row" id="infoGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model'">
<!-- The serial text box gets placed in div below programmatically -->
<div class="row" id="serialDiv">
<label class="cell" for="serialInput">Order #:</label>
</div>
<!-- The first and last name text boxes gets placed in corresponding
divs below, with a relative ref to data-bound parent (group) -->
<div class="row" id="firstnameDiv">
<label class="cell" for="firstnameInput">First:</label>
</div>
<div class="row" id="lastnameDiv">
<label class="cell" for="lastnameInput">Last:</label>
</div>
<!-- Here, we break out of any parent data binding association
by declaratively specifying a direct ref expression.
There is no necessity for DOM to match data structure even in
declarative ref specifications. -->
<div class="row" id="emailDiv">
<label class="cell" for="emailInput">Email:</label>
<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'expr:model.Email'"></input>
</div>
</div>
<br/>
Choose:
<button id="shipto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', model.ShipTo);}">Ship To</button>
<button id="billto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', model.BillTo);}">Bill To</button>
<br/>
<!--
Following group shows a declarative example of a ref thats relative
to another widget's ref. This is useful, for example, if the widget
may move its DOM location at some point.
Here, we're saying group's ref is relative to "infoGroup" widget's
ref and is located at the property "ShipTo" therein.
-->
<div class="row" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'widget:infoGroup.ShipTo'">
<!-- This is a relative ref, passed as a string -->
<div class="row">
<label class="cell" for="streetInput">Street:</label>
<input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'Street'"></input>
</div>
<!-- Here, we are explicit that the string is a relative ref, which
is slightly more performant. -->
<div class="row">
<label class="cell" for="cityInput">City:</label>
<input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'rel:City'"></input>
</div>
<!-- Just goofing with whitespace in refs below, for robustness -->
<div class="row">
<label class="cell" for="stateInput">State:</label>
<input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: ' rel: State' "></input>
</div>
<div class="row">
<label class="cell" for="zipInput">Zipcode:</label>
<input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="ref: 'Zip' "></input>
</div>
</div>
<br/>
Model:
<button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model.reset();}">Reset</button>
</div></div></div>
<script type="text/javascript">
function setRef(id, addrRef) {
var widget = dijit.byId(id);
widget.set("ref", addrRef);
}
</script>
</body>
</html>