206 lines
5.9 KiB
HTML
206 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>dojox.form.CheckedMultiSelect</title>
|
|
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css">
|
|
<link rel="stylesheet" href="../resources/CheckedMultiSelect.css">
|
|
<style>
|
|
@import url(../../../dojo/resources/dojo.css);
|
|
@import url(../../../dijit/tests/css/dijitTests.css);
|
|
|
|
.ark {
|
|
text-decoration: underline;
|
|
}
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true">
|
|
</script>
|
|
<script src="../../../dijit/tests/_testCommon.js">
|
|
</script>
|
|
<script type="text/javascript">
|
|
|
|
dojo.require("dojo.parser");
|
|
dojo.require("dojox.form.CheckedMultiSelect");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dijit.form.Form");
|
|
dojo.require("dojo.data.ItemFileWriteStore");
|
|
|
|
var data = {
|
|
identifier: "value",
|
|
label: "label",
|
|
items: [{
|
|
value: "AL",
|
|
label: "Alabama",
|
|
selected: true
|
|
}, {
|
|
value: "AK",
|
|
label: "Alaska"
|
|
}, {
|
|
value: "AZ",
|
|
label: "Arizona",
|
|
selected: true
|
|
}, {
|
|
value: "AR",
|
|
label: "Arkansas"
|
|
}, {
|
|
value: "CA",
|
|
label: "California"
|
|
}, {
|
|
value: "CO",
|
|
label: "Colorado"
|
|
}, {
|
|
value: "CT",
|
|
label: "Connecticut"
|
|
}]
|
|
};
|
|
|
|
var readStore = new dojo.data.ItemFileReadStore({
|
|
data: dojo.clone(data)
|
|
});
|
|
var writeStore = new dojo.data.ItemFileWriteStore({
|
|
data: dojo.clone(data)
|
|
});
|
|
|
|
var checkOptions = 0;
|
|
var radioOptions = 0;
|
|
var addNum = 10;
|
|
var testType;
|
|
// Uncomment below line to run perf tests - note SLOW to run
|
|
//testType = "perf";
|
|
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1>
|
|
<h2>Non-dojo select (for comparison)</h2>
|
|
<select>
|
|
<option value ="volvo">Volvo</option>
|
|
<option value ="saab">Saab</option>
|
|
<option value="opel">Opel</option>
|
|
<option value="audi">Audi</option>
|
|
</select>
|
|
<form dojoType="dijit.form.Form" jsId="form">
|
|
<hr><h2>Multi-select</h2>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<select jsId="ms1" multiple="true" name="ms1" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
|
|
<option value="TN">Tennessee</option>
|
|
<option value="VA" selected="selected">Virginia</option>
|
|
<option value="WA" selected="selected">Washington</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="CA">California</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
ms1.invertSelection(true);
|
|
return false;
|
|
</script>
|
|
Invert Selection
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
ms1.set("disabled", !ms1.disabled);
|
|
return false;
|
|
</script>
|
|
Toggle Disabled
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
console.log(ms1.get("displayedValue"));
|
|
return false;
|
|
</script>
|
|
Get Displayed Value
|
|
</button>
|
|
</td>
|
|
<tr>
|
|
<td>
|
|
<select jsId="ms2" multiple="true" name="ms2" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
|
|
<option value="UT">Utah</option>
|
|
<option value="TX" selected="selected">Texas</option>
|
|
<option value="GA" selected="selected">Georgia</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="WY">Wyoming</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
ms2.set("readOnly", !ms2.readOnly);
|
|
return false;
|
|
</script>
|
|
Toggle Read Only
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<select jsId="ms3" multiple="true" maxHeight="125" name="ms3" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
checkOptions++;
|
|
ms3.addOption({value: checkOptions + "", label: "Option " + (checkOptions)});
|
|
return false;
|
|
</script>
|
|
Add Check Option
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
if(checkOptions > 0){
|
|
checkOptions--;
|
|
ms3.removeOption(checkOptions);
|
|
}
|
|
return false;
|
|
</script>
|
|
Remove Check Option
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<select jsId="ms4" multiple="true" maxHeight="125" size="5" name="ms4" store="readStore" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
|
|
</select>
|
|
</td>
|
|
<td>
|
|
Read-Store-based
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr><h2>Validation</h2>
|
|
<select jsId="rq1" multiple="true" required="true" name="rq1" store="readStore" dojoType="dojox.form.CheckedMultiSelect" invalidMessage="You need to select at least one" dropdown="false">
|
|
</select>
|
|
<button dojoType="dijit.form.Button">
|
|
Validate
|
|
<script type='dojo/method' event='onClick'>
|
|
var isvalid = rq1.isValid();
|
|
console.warn("isvalid?", isvalid, form, form.validate);
|
|
try{
|
|
rq1.validate();
|
|
form.validate();
|
|
}catch(e){
|
|
console.log(e);
|
|
}
|
|
console.warn("validated");
|
|
</script>
|
|
</button>
|
|
<hr><h2>Output values in console</h2>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
console.dir(form.get("value"));
|
|
return false;
|
|
</script>
|
|
Get Values
|
|
</button>
|
|
</form>
|
|
</body>
|
|
</html>
|