dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
206 lines (199 loc) • 5.95 kB
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" data-dojo-config="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" data-dojo-id="form">
<hr><h2>Multi-select</h2>
<table>
<tr>
<td>
<select data-dojo-id="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" data-dojo-event="onClick">
ms1.invertSelection(true);
return false;
</script>
Invert Selection
</button>
<button dojoType="dijit.form.Button">
<script type="dojo/method" data-dojo-event="onClick">
ms1.set("disabled", !ms1.disabled);
return false;
</script>
Toggle Disabled
</button>
<button dojoType="dijit.form.Button">
<script type="dojo/method" data-dojo-event="onClick">
console.log(ms1.get("displayedValue"));
return false;
</script>
Get Displayed Value
</button>
</td>
<tr>
<td>
<select data-dojo-id="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" data-dojo-event="onClick">
ms2.set("readOnly", !ms2.readOnly);
return false;
</script>
Toggle Read Only
</button>
</td>
</tr>
<tr>
<td>
<select data-dojo-id="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" data-dojo-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" data-dojo-event="onClick">
if(checkOptions > 0){
checkOptions--;
ms3.removeOption(checkOptions);
}
return false;
</script>
Remove Check Option
</button>
</td>
</tr>
<tr>
<td>
<select data-dojo-id="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 data-dojo-id="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' data-dojo-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" data-dojo-event="onClick">
console.dir(form.get("value"));
return false;
</script>
Get Values
</button>
</form>
</body>
</html>