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.
414 lines (399 loc) • 14 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; }
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
<script src="../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
require(["doh", "dojo/_base/array", "dojo/_base/lang", "dojo/dom-form", "dojo/on", "dojo/parser", "dojo/ready",
"dojox/form/CheckedMultiSelect", "dijit/form/Button", "dijit/form/Form", "dojo/data/ItemFileReadStore",
"dojo/data/ItemFileWriteStore", "dojo/store/Memory"
], function(doh, array, lang, domForm, on, parser, ready, CheckedMultiSelect, Button, Form, ItemFileReadStore,
ItemFileWriteStore, Memory){
var data = {
identifier: "value",
label: "label",
items: [
{value: "AL", label: "Alabama"},
{value: "AK", label: "Alaska"},
{value: "AZ", label: "Arizona"},
{value: "AR", label: "Arkansas"},
{value: "CA", label: "California"},
{value: "CO", label: "Colorado"},
{value: "CT", label: "Connecticut"}
]
};
readStore = new ItemFileReadStore({data:lang.clone(data)});
writeStore = new ItemFileWriteStore({data:lang.clone(data)});
objectStore = new Memory({data:lang.clone(data.items), idProperty:"value"});
numOptions = 0;
var addNum = 10;
var testType;
itemCounter=0; // for disabled/readOnly add item button
// Uncomment below line to run perf tests - note SLOW to run
//testType = "perf";
ready(function(){
parser.parse();
doh.register("tests",
[
function test_setValue(t){
t.is(["VA","WA"], form.get("value").ms1);
t.is(["TX","GA"], form.get("value").ms2);
ms1.set("value", ["TN","CA"]);
t.is(["TN","CA"], form.get("value").ms1);
ms1.invertSelection();
t.is(["VA","WA","FL"], form.get("value").ms1);
},
function test_addSelected(t){
array.forEach(ms2.getOptions(ms2.get("value")), function(i){
ms2.removeOption(i);
ms1.addOption(i);
});
t.is([], form.get("value").ms2);
ms1.invertSelection();
t.is(["TN","CA"], form.get("value").ms1);
},
function delete_selected(t){
t.is(["TN","CA"], ms1.get("value"));
var d = new doh.Deferred();
ms1.removeOption("CA");
window.setTimeout(function(){
try{
t.is(["TN"], ms1.get("value"));
d.callback(true);
}catch(e){ d.errback(e); }
}, 100);
return d;
},
function test_storeBased(t){
t.is([], ms4.get("value"));
ms4.set("value", ["CA","AL"]);
t.is(["AL","CA"], ms4.get("value"));
t.is([], ms6.get("value"));
ms6.set("value", ["CA","AL"]);
t.is(["AL","CA"], ms6.get("value"));
},
function test_changeSelected(t){
t.is([], ms5.get("value"));
ms5.set("value", ["AL", "AK"]);
var d = new doh.Deferred();
var cb = function(item){
try{
writeStore.setValue(item, "label", "North Pole");
try{
t.is(["AL","AK"], ms5.get("value"));
t.is(writeStore.getValue(item, "label"),
array.filter(ms5._getChildren(), function(n){return n.option.value==="AK";})[0].labelNode.innerHTML);
d.callback(true);
}catch(e){ d.errback(e);}
}
catch(e){
d.errback(e);
}
}
writeStore.fetchItemByIdentity({identity: "AK", onItem: cb});
return d;
},
function test_deleteNonSelected(t){
t.is(["AL","AK"], ms5.get("value"));
var d = new doh.Deferred();
var cb = function(item){
try{
t.is(7, ms5._getChildren().length);
writeStore.deleteItem(item);
try{
t.is(["AL","AK"], ms5.get("value"));
t.is(6, ms5._getChildren().length);
d.callback(true);
}catch(e){ d.errback(e);}
}catch (e){
d.errback(e);
}
}
writeStore.fetchItemByIdentity({identity: "AZ", onItem: cb});
return d;
},
function test_deleteSelected(t){
t.is(["AL","AK"], ms5.get("value"));
var d = new doh.Deferred();
var cb = function(item){
try{
t.is(6, ms5._getChildren().length);
writeStore.deleteItem(item);
try{
t.is(["AL"], ms5.get("value"));
t.is(5, ms5._getChildren().length);
d.callback(true);
}catch(e){ d.errback(e);}
}catch (e){
d.errback(e);
}
}
writeStore.fetchItemByIdentity({identity: "AK", onItem: cb});
return d;
},
function test_newItem(t){
t.is(["AL"], ms5.get("value"));
t.is(5, ms5._getChildren().length);
ms5.set("value", ["AL","NY"]);
t.is(["AL"], ms5.get("value"));
var d = new doh.Deferred();
writeStore.newItem({value: "NY", label: "New York"});
try{
t.is(6, ms5._getChildren().length);
ms5.set("value", ["AL","NY"]);
t.is(["AL","NY"], ms5.get("value"));
d.callback(true);
}catch(e){d.errback(e);}
return d;
},
function test_formDegrade(t){
var form = domForm.toObject("form");
t.is(form.ms1, ["TN"], "form is set properly");
t.is(form.ms4, ["AL", "CA"], "form is set properly");
},
{
name: "test_performance_single",
testType: testType,
trialDuration: 100,
trialIterations: 100,
trialDelay: 100,
runTest: function(t){
var opt = {value: "Test", label: "Test Option"};
ms3.addOption(opt);
ms3.removeOption(opt);
}
},
{
name: "test_performance_separate",
testType: testType,
trialDuration: 100,
trialIterations: 100,
trialDelay: 100,
setUp: function(t){
var opts = t.options = [];
for(var i = 0; i < addNum; i++){
opts.push({value: i + "", label: "Option " + (i + 1)});
}
},
runTest: function(t){
array.forEach(t.options, function(opt){
ms3.addOption(opt);
});
array.forEach(t.options, function(opt){
ms3.removeOption(opt);
});
},
tearDown: function(t){
delete t.options;
}
},
{
name: "test_performance_batch",
testType: testType,
trialDuration: 100,
trialIterations: 100,
trialDelay: 100,
setUp: function(t){
var opts = t.options = [];
for(var i = 0; i < addNum; i++){
opts.push({value: i + "", label: "Option " + (i + 1)});
}
},
runTest: function(t){
ms3.addOption(t.options);
ms3.removeOption(t.options);
},
tearDown: function(t){
delete t.options;
}
}
]
);
doh.run();
on(ms1, "change", function(val){
console.log("First Select Changed to " + val);
});
on(ss1, "change", function(val){
console.log("First Radio Select Changed to " + val);
});
});
});
</script>
</head>
<body class="claro">
<h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1>
<form data-dojo-type="dijit/form/Form" id="form" data-dojo-id="form">
<h2>Check Boxes</h2>
<select data-dojo-id="ms1" multiple="true" name="ms1" data-dojo-type="dojox.form.CheckedMultiSelect">
<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>
<select data-dojo-id="ms2" multiple="true" name="ms2" data-dojo-type="dojox.form.CheckedMultiSelect">
<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>
<select data-dojo-id="ms3" multiple="true" name="ms3" data-dojo-type="dojox.form.CheckedMultiSelect">
</select>
<hr>
<h2>Radio Buttons</h2>
<select data-dojo-id="ss1" name="ss1" data-dojo-type="dojox.form.CheckedMultiSelect">
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
<select data-dojo-id="ss2" name="ss2" value="TX" data-dojo-type="dojox.form.CheckedMultiSelect">
<option value="UT">Utah</option>
<option value="TX">Texas</option>
<option value="GA">Georgia</option>
<option value="ID">Idaho</option>
<option value="WY">Wyoming</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
</select>
<select data-dojo-id="ss3" name="ss3" data-dojo-type="dojox.form.CheckedMultiSelect">
</select>
<hr>
<h4 class="testSubtitle">Store-based</h4>
<select data-dojo-id="ms4" multiple="true" size="5" name="ms4" store="readStore" data-dojo-type="dojox.form.CheckedMultiSelect">
</select>
<select data-dojo-id="ms5" multiple="true" size="5" name="ms5" store="writeStore" data-dojo-type="dojox.form.CheckedMultiSelect">
</select>
<select data-dojo-id="ms6" multiple="true" size="5" name="ms6" store="objectStore" labelAttr="label" data-dojo-type="dojox.form.CheckedMultiSelect">
</select>
<hr>
<h4 class="testSubtitle">Validation</h4>
<select data-dojo-id="rq1" multiple="true" required="true" name="rq1" store="readStore" data-dojo-type="dojox.form.CheckedMultiSelect"
invalidMessage="You need to select at least one"
></select>
<button data-dojo-type="dijit.form.Button">
Validate
<script type='dojo/on' data-dojo-event='click'>
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>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
console.dir(form.get("value"));
</script>
Get Values
</button>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
numOptions++;
ms3.addOption({value: numOptions + "", label: "Option " + (numOptions)});
</script>
Add Check Option
</button>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
numOptions++;
ss3.addOption({value: numOptions + "", label: "Option " + (numOptions)});
</script>
Add Radio Option
</button>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
ms3.set("disabled", !ms3.disabled);
ss3.set("disabled", !ss3.disabled);
</script>
Toggle Disabled
</button>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
ms2.set("readOnly", !ms2.readOnly);
ss2.set("readOnly", !ss2.readOnly);
</script>
Toggle Read Only
</button>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
ms1.invertSelection(true);
</script>
Invert Selection
</button>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
console.log(ms1.get("displayedValue"));
</script>
Get Displayed Value
</button>
<hr>
<h1>Disabled select (shouldn't be able to check items)</h1>
<select data-dojo-props='multiple:"true", id:"multiselectdisabled", name:"multiselectdisabled", disabled:true' data-dojo-type="dojox.form.CheckedMultiSelect">
<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>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
dijit.byId("multiselectdisabled").addOption({value: itemCounter + "", label: "Option " + (++itemCounter)});
</script>
Add item
</button>
<hr>
<h1>ReadOnly select (shouldn't be able to check items, but checkboxes should still be colored)</h1>
<select data-dojo-props='multiple:"true", id:"multiselectreadonly", name:"multiselectreadonly", readOnly:true' data-dojo-type="dojox.form.CheckedMultiSelect">
<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>
<button data-dojo-type="dijit.form.Button">
<script type="dojo/on" data-dojo-event="click">
dijit.byId("multiselectreadonly").addOption({value: itemCounter + "", label: "Option " + (++itemCounter)});
</script>
Add item
</button>
</form>
</body>
</html>