You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
8.8 KiB
216 lines
8.8 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>dojox/form/Manager (test #1)</title> |
|
<style > |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/themes/dijit.css"; |
|
@import "../../../dijit/themes/tundra/tundra.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
|
|
fieldset { border: 1px solid; margin: 1em; padding: 1em; } |
|
legend { font-weight: bolder; font-size: larger; } |
|
|
|
#result { background-color: white; } |
|
#result th { font-weight: bolder; } |
|
#result .hilite { background-color: #fd8; } |
|
|
|
.makeYellow { background-color: #ffa; } |
|
</style> |
|
<script src="../../../dojo/dojo.js" data-dojo-config="async: 1, isDebug: 1, parseOnLoad: 0"></script> |
|
<!-- |
|
<script type="text/javascript" src="../manager/_Mixin.js"></script> |
|
<script type="text/javascript" src="../manager/_FormMixin.js"></script> |
|
<script type="text/javascript" src="../manager/_ValueMixin.js"></script> |
|
<script type="text/javascript" src="../manager/_EnableMixin.js"></script> |
|
<script type="text/javascript" src="../manager/_DisplayMixin.js"></script> |
|
<script type="text/javascript" src="../manager/_ClassMixin.js"></script> |
|
<script type="text/javascript" src="../Manager.js"></script> |
|
--> |
|
<script> |
|
dojo.require("dojox.form.Manager"); |
|
|
|
dojo.require("dijit.dijit"); // optimize: load dijit layer |
|
dojo.require("dijit.form.Button"); |
|
dojo.require("dijit.form.RadioButton"); |
|
dojo.require("dijit.form.TextBox"); |
|
dojo.require("dijit.form.ComboBox"); |
|
dojo.require("dijit.form.SimpleTextarea"); |
|
dojo.require("dijit.form.Select"); |
|
|
|
dojo.require("dijit.layout.BorderContainer"); |
|
dojo.require("dijit.layout.ContentPane"); |
|
|
|
dojo.require("dojo.parser"); |
|
|
|
dojo.addOnLoad(function(){ |
|
// show values the first time |
|
dijit.byId("form").showValues(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="tundra"> |
|
|
|
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="false" liveSplitters="false" style="height: 50em;"> |
|
<div dojoType="dijit.layout.ContentPane" region="left" splitter="true" style="width: 15em;"> |
|
<table id="result" border="1"> |
|
<thead> |
|
<th>Name</th> |
|
<th>Value</th> |
|
</thead> |
|
<tbody id="table"></tbody> |
|
</table> |
|
</div> |
|
<div dojoType="dijit.layout.ContentPane" region="center" splitter="true" style="width: 50em;"> |
|
<form dojoType="dojox.form.Manager" id="form"> |
|
<fieldset dojoAttachPoint="part1"> |
|
<legend>HTML form elements</legend> |
|
<div> |
|
<input type="checkbox" id="e01" name="e01" value="e01" observer="showValues, logRadio"> |
|
<label for="e01">e01 input/checkbox</label> |
|
</div> |
|
<div> |
|
<input type="radio" id="e021" name="e02" value="e02-1" observer="showValues"> |
|
<label for="e021">e02-1 input/radio</label> |
|
|
|
<input type="radio" id="e022" name="e02" value="e02-2" checked="checked"> |
|
<label for="e022">e02-2 input/radio</label> |
|
</div> |
|
<div> |
|
<input type="text" id="e03" name="e03" value="e03" observer="showValues"> |
|
<label for="e03">e03 input/text</label> |
|
</div> |
|
<div> |
|
<input type="password" id="e04" name="e04" value="e04" observer="showValues"> |
|
<label for="e04">e04 input/password</label> |
|
</div> |
|
<div> |
|
<input type="hidden" id="e05" name="e05" value="e05" observer="showValues"> |
|
<label for="e05">e05 input/hidden</label> |
|
</div> |
|
<div> |
|
<select id="e06" name="e06" observer="showValues"> |
|
<option value="e06-1">e06-1 first</option> |
|
<option value="e06-2" selected="selected">e06-2 second</option> |
|
</select> |
|
<label for="e06">e06 select</label> |
|
</div> |
|
<div> |
|
<label for="e07">e07 textarea</label><br> |
|
<textarea id="e07" name="e07" observer="showValues" |
|
rows="3" cols="15" style="width: 15em;">e07</textarea> |
|
</div> |
|
<div> |
|
<button name="e08" observer="showValues">e08 button</button> |
|
<input type="button" name="e09" value="e09 input/button" observer="showValues"> |
|
<input type="reset" name="e10" value="e10 input/reset" observer="showValues"> |
|
<input type="submit" name="e11" value="e11 input/submit" observer="showValues"> |
|
</div> |
|
</fieldset> |
|
<fieldset dojoAttachPoint="part2"> |
|
<legend>Dijit form widgets</legend> |
|
<div> |
|
<input type="checkbox" dojoType="dijit.form.CheckBox" id="w01" name="w01" value="w01" data-dojo-observer="showValues"> |
|
<label for="w01">w01 input/checkbox dijit.form.CheckBox</label> |
|
</div> |
|
<div> |
|
<input type="radio" dojoType="dijit.form.RadioButton" id="w021" name="w02" value="w02-1" observer="showValues"> |
|
<label for="w021">w02-1 input/radio dijit.form.RadioButton</label> |
|
|
|
<input type="radio" dojoType="dijit.form.RadioButton" id="w022" name="w02" value="w02-2" checked="checked" observer="logRadio"> |
|
<label for="w022">w02-2 input/radio dijit.form.RadioButton</label> |
|
</div> |
|
<div> |
|
<input type="text" dojoType="dijit.form.TextBox" id="w03" name="w03" value="w03" observer="showValues" intermediateChanges="true"> |
|
<label for="w03">w03 input/text dijit.form.TextBox with intermediateChanges="true"</label> |
|
</div> |
|
<div> |
|
<input type="password" dojoType="dijit.form.TextBox" id="w04" name="w04" value="w04" observer="showValues"> |
|
<label for="w04">w04 input/password dijit.form.TextBox</label> |
|
</div> |
|
<div> |
|
<select dojoType="dijit.form.Select" id="w06" name="w06" observer="showValues"> |
|
<option value="w06-1">w06-1 first</option> |
|
<option value="w06-2" selected="selected">w06-2 second</option> |
|
</select> |
|
<label for="w06">w06 select dijit.form.Select</label> |
|
</div> |
|
<div> |
|
<label for="w07">w07 textarea dijit.form.SimpleTextarea with intermediateChanges="true"</label><br> |
|
<textarea dojoType="dijit.form.SimpleTextarea" id="w07" name="w07" observer="showValues" |
|
rows="3" cols="15" style="width: 15em;" intermediateChanges="true">w07</textarea> |
|
</div> |
|
<div> |
|
<button dojoType="dijit.form.Button" name="w08" observer="showValues">w08 button</button> |
|
<button type="button" dojoType="dijit.form.Button" name="w09" observer="showValues">w09 type=button</button> |
|
<button type="reset" dojoType="dijit.form.Button" name="w10" observer="showValues">w10 type=reset</button> |
|
<button type="submit" dojoType="dijit.form.Button" name="w11" observer="showValues">w11 typesubmit</button> |
|
</div> |
|
</fieldset> |
|
<script type="dojo/method" data-dojo-event="onSubmit"> |
|
// do not submit this form |
|
return false; |
|
</script> |
|
<script type="dojo/method" data-dojo-event="logRadio"> |
|
// sample observer: logs radio buttons by name |
|
var values = this.gatherFormValues(["e02", "w02"]); |
|
console.log("e02: " + values.e02 + ", w02: " + values.w02); |
|
</script> |
|
<script type="dojo/method" data-dojo-event="showValues" data-dojo-args="value,name"> |
|
if(name){ |
|
// first time this method is called with no parameters |
|
// show the name and the value otherwise |
|
console.log("name = ", name, " value = ", value); |
|
} |
|
var values = this.gatherFormValues(), |
|
table = dojo.byId("table"), names = []; |
|
// clear the table |
|
while(table.lastChild){ |
|
dojo.destroy(table.lastChild); |
|
} |
|
// show gathered values |
|
for(var name in values){ |
|
if(values.hasOwnProperty(name)){ |
|
names.push(name); |
|
} |
|
} |
|
names.sort(); |
|
dojo.forEach(names, function(name){ |
|
var tr = dojo.doc.createElement("tr"), |
|
tdn = dojo.doc.createElement("td"), |
|
tdv = dojo.doc.createElement("td"); |
|
tdn.innerHTML = name; |
|
tdv.innerHTML = "" + values[name]; |
|
if(this._oldValues && this._oldValues[name] != values[name]){ |
|
dojo.addClass(tr, "hilite"); |
|
} |
|
tr.appendChild(tdn); |
|
tr.appendChild(tdv); |
|
table.appendChild(tr); |
|
}, this); |
|
this._oldValues = values; |
|
</script> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<p> |
|
<input type="checkbox" id="c01" name="c01" value="c01" checked="checked" |
|
onclick="dijit.byId('form')[this.checked ? 'enable' : 'disable']()"> |
|
<label for="c01">enable the form elements and widgets</label> |
|
<br> |
|
<input type="checkbox" id="c02" name="c02" value="c02" |
|
onclick="dijit.byId('form')[this.checked ? 'addClass' : 'removeClass']('makeYellow', ['part1', 'part2'])"> |
|
<label for="c02">add/remove yellow background</label> |
|
<br> |
|
<input type="checkbox" id="c03" name="c03" value="c03" checked="checked" |
|
onclick="dijit.byId('form')[this.checked ? 'show' : 'hide'](['part1'])"> |
|
<label for="c03">show form elements</label> |
|
<br> |
|
<input type="checkbox" id="c04" name="c04" value="c04" checked="checked" |
|
onclick="dijit.byId('form')[this.checked ? 'show' : 'hide'](['part2'])"> |
|
<label for="c04">show form widgets</label> |
|
</p> |
|
</body> |
|
</html>
|
|
|