347 lines
11 KiB
HTML
347 lines
11 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; }
|
|
</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("doh.runner");
|
|
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"},
|
|
{value: "AK", label: "Alaska"},
|
|
{value: "AZ", label: "Arizona"},
|
|
{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 numOptions = 0;
|
|
var addNum = 10;
|
|
var testType;
|
|
// Uncomment below line to run perf tests - note SLOW to run
|
|
//testType = "perf";
|
|
|
|
dojo.addOnLoad(function(){
|
|
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){
|
|
dojo.forEach(ms2.getOptions(ms2.getValue()), 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.getValue());
|
|
var d = new doh.Deferred();
|
|
ms1.removeOption("CA");
|
|
window.setTimeout(function(){
|
|
try{
|
|
t.is(["TN"], ms1.getValue());
|
|
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"));
|
|
},
|
|
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"),
|
|
dojo.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;
|
|
},
|
|
{
|
|
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){
|
|
dojo.forEach(t.options, function(opt){
|
|
ms3.addOption(opt);
|
|
});
|
|
dojo.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();
|
|
dojo.connect(ms1, "onChange", function(val){
|
|
console.log("First Select Changed to " + val);
|
|
});
|
|
dojo.connect(ss1, "onChange", function(val){
|
|
console.log("First Radio Select Changed to " + val);
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1>
|
|
<form dojoType="dijit.form.Form" jsId="form">
|
|
<h2>Check Boxes</h2>
|
|
<select jsId="ms1" multiple="true" name="ms1" dojoType="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 jsId="ms2" multiple="true" name="ms2" dojoType="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 jsId="ms3" multiple="true" name="ms3" dojoType="dojox.form.CheckedMultiSelect">
|
|
</select>
|
|
<hr>
|
|
<h2>Radio Buttons</h2>
|
|
<select jsId="ss1" name="ss1" dojoType="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 jsId="ss2" name="ss2" value="TX" dojoType="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 jsId="ss3" name="ss3" dojoType="dojox.form.CheckedMultiSelect">
|
|
</select>
|
|
<hr>
|
|
<h4 class="testSubtitle">Store-based</h4>
|
|
<select jsId="ms4" multiple="true" size="5" name="ms4" store="readStore" dojoType="dojox.form.CheckedMultiSelect">
|
|
</select>
|
|
<select jsId="ms5" multiple="true" size="5" name="ms5" store="writeStore" dojoType="dojox.form.CheckedMultiSelect">
|
|
</select>
|
|
<hr>
|
|
<h4 class="testSubtitle">Validation</h4>
|
|
<select jsId="rq1" multiple="true" required="true" name="rq1" store="readStore" dojoType="dojox.form.CheckedMultiSelect"
|
|
invalidMessage="You need to select at least one"
|
|
></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>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
console.dir(form.get("value"));
|
|
</script>
|
|
Get Values
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
numOptions++;
|
|
ms3.addOption({value: numOptions + "", label: "Option " + (numOptions)});
|
|
</script>
|
|
Add Check Option
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
numOptions++;
|
|
ss3.addOption({value: numOptions + "", label: "Option " + (numOptions)});
|
|
</script>
|
|
Add Radio Option
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
ms3.set("disabled", !ms3.disabled);
|
|
ss3.set("disabled", !ss3.disabled);
|
|
</script>
|
|
Toggle Disabled
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
ms2.set("readOnly", !ms2.readOnly);
|
|
ss2.set("readOnly", !ss2.readOnly);
|
|
</script>
|
|
Toggle Read Only
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
ms1.invertSelection(true);
|
|
</script>
|
|
Invert Selection
|
|
</button>
|
|
<button dojoType="dijit.form.Button">
|
|
<script type="dojo/method" event="onClick">
|
|
console.log(ms1.get("displayedValue"));
|
|
</script>
|
|
Get Displayed Value
|
|
</button>
|
|
</form>
|
|
</body>
|
|
</html>
|