Updated
This commit is contained in:
Éric Lemoine
346
master/examples/test_CheckedMultiSelect.html
Normal file
346
master/examples/test_CheckedMultiSelect.html
Normal file
@@ -0,0 +1,346 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user