New file |
0,0 → 1,284 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
"http://www.w3.org/TR/html4/strict.dtd"> |
<html> |
<head> |
<title>Dojo ComboBox Widget Test</title> |
<style> |
@import "../../../dojo/resources/dojo.css"; |
@import "../css/dijitTests.css"; |
</style> |
<script type="text/javascript" src="../../../dojo/dojo.js" |
djConfig="isDebug: true, parseOnLoad: true"></script> |
<script type="text/javascript" src="../_testCommon.js"></script> |
|
<script type="text/javascript"> |
dojo.require("dojo.data.ItemFileReadStore"); |
dojo.require("dijit.form.ComboBox"); |
dojo.require("dojo.parser"); // scan page for widgets and instantiate them |
|
function setVal1(val){ |
dojo.byId('value1').value=val; |
} |
function setVal2(val){ |
dojo.byId('value2').value=val; |
console.debug("Value changed to ["+val+"] in second ComboBox (#1652)"); |
} |
function setVal3(val){ |
dojo.byId('value3').value=val; |
} |
function setVal4(val){ |
dojo.byId('value4').value=val; |
} |
var combo; |
function init(){ |
var store = new dojo.data.ItemFileReadStore({url: '../_data/states.json'}); |
combo = new dijit.form.ComboBox({ |
name:"prog", |
autoComplete:false, |
store: store, |
searchAttr:"name" |
}, dojo.byId("progCombo")); |
|
var store2 = new dojo.data.ItemFileReadStore({url: '../../demos/i18n/data.json'}); |
combo = new dijit.form.ComboBox({ |
name:"prog2", |
autoComplete:false, |
store:store2, |
query:{type:'country'}, |
searchAttr:"name" |
}, dojo.byId("progCombo2")); |
} |
dojo.addOnLoad(init); |
|
function toggleDisabled(button, widget){ |
widget = dijit.byId(widget); |
button = dojo.byId(button); |
widget.setDisabled(!widget.disabled); |
button.innerHTML= widget.disabled ? "Enable" : "Disable"; |
} |
</script> |
</head> |
|
<body> |
<h1>Dojo ComboBox Widget Test</h1> |
<p> |
A ComboBox is like a text <input> field (ie, you can input any value you want), |
but it also has a list of suggested values that you can choose from. |
The drop down list is filtered by the data you have already typed in. |
</p> |
<form action="#" method="GET"> |
|
<p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p> |
<label for="setvaluetest">US State test 1: </label> |
<select id="setvaluetest" |
name="state1" |
dojoType="dijit.form.ComboBox" |
class="medium" |
style="width:50%;font-size:15pt;" |
name="foo.bar1" |
autoComplete="false" |
onChange="dojo.byId('oc1').value=arguments[0]" |
pageSize="30" |
> |
<option></option> |
<option>Alabama</option> |
<option>Alaska</option> |
<option>American Samoa</option> |
<option>Arizona</option> |
<option>Arkansas</option> |
<option>Armed Forces Europe</option> |
<option>Armed Forces Pacific</option> |
<option>Armed Forces the Americas</option> |
<option>California</option> |
<option>Colorado</option> |
<option>Connecticut</option> |
<option>Delaware</option> |
<option>District of Columbia</option> |
<option>Federated States of Micronesia</option> |
<option>Florida</option> |
<option>Georgia</option> |
<option>Guam</option> |
<option>Hawaii</option> |
<option>Idaho</option> |
<option>Illinois</option> |
<option>Indiana</option> |
<option selected>Iowa</option> |
<option>Kansas</option> |
<option>Kentucky</option> |
<option>Louisiana</option> |
<option>Maine</option> |
<option>Marshall Islands</option> |
<option>Maryland</option> |
<option>Massachusetts</option> |
<option>Michigan</option> |
<option>Minnesota</option> |
<option>Mississippi</option> |
<option>Missouri</option> |
<option>Montana</option> |
<option>Nebraska</option> |
<option>Nevada</option> |
<option>New Hampshire</option> |
<option>New Jersey</option> |
<option>New Mexico</option> |
<option>New York</option> |
<option>North Carolina</option> |
<option>North Dakota</option> |
<option>Northern Mariana Islands</option> |
<option>Ohio</option> |
<option>Oklahoma</option> |
<option>Oregon</option> |
<option>Pennsylvania</option> |
<option>Puerto Rico</option> |
<option>Rhode Island</option> |
<option>South Carolina</option> |
<option>South Dakota</option> |
<option>Tennessee</option> |
<option>Texas</option> |
<option>Utah</option> |
<option>Vermont</option> |
<option>Virgin Islands, U.S.</option> |
<option>Virginia</option> |
<option>Washington</option> |
<option>West Virginia</option> |
<option>Wisconsin</option> |
<option>Wyoming</option> |
</select> |
onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> |
|
<hr> |
|
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" |
url="../_data/states.json"></div> |
|
<div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore" |
url="../_data/dijits.json"></div> |
|
<p>ComboBox #2: url, autoComplete=true:</p> |
<label for="datatest">US State test 2: </label> |
<input dojoType="dijit.form.ComboBox" |
value="California" |
class="medium" |
store="stateStore" |
searchAttr="name" |
style="width: 300px;" |
name="state2" |
onChange="setVal2" |
id="datatest" |
> |
<span>Value: <input id="value2" disabled value="California"></span> |
<hr> |
<label for="datatest">Dijit List test #1: </label> |
<input dojoType="dijit.form.ComboBox" |
value="dijit.Editor" |
class="medium" |
store="dijitStore" |
searchAttr="className" |
style="width: 300px;" |
name="dijitList1" |
id="datatestDijit" |
> |
<span>Hey look, this one is kind of useful.</span> |
<hr> |
|
<p>ComboBox #3: initially disabled, url, autoComplete=false:</p> |
<label for="combo3">US State test 3: </label> |
<input id="combo3" |
dojoType="dijit.form.ComboBox" |
value="California" |
class="medium" |
store="stateStore" |
searchAttr="name" |
style="width: 300px;" |
name="state3" |
autoComplete="false" |
onChange="setVal3" |
disabled |
> |
<span>Value: <input id="value3" disabled></span> |
<div> |
<button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button> |
</div> |
<hr> |
<p>ComboBox #4: url, autoComplete=false required=true:</p> |
<label for="combobox4">US State test 4: </label> |
<input dojoType="dijit.form.ComboBox" |
value="" |
class="medium" |
store="stateStore" |
searchAttr="name" |
style="width: 300px;" |
name="state4" |
onChange="setVal4" |
autoComplete="false" |
id="combobox4" |
required="true" |
> |
<span>Value: <input id="value4" disabled></span> |
<hr> |
<p>A ComboBox with no arrow</p> |
<input dojoType="dijit.form.ComboBox" |
value="California" |
store="stateStore" |
searchAttr="name" |
name="state5" |
autoComplete="false" |
hasDownArrow="false" |
> |
<hr> |
<p>A combo created by createWidget</p> |
<input id="progCombo"> |
<hr> |
<p>A ComboBox with an initial query. (Limits list to items with type = country.)</p> |
<input id="progCombo2"> |
<hr> |
<input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input> |
<input type="submit"> |
|
</form> |
<p> |
This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. |
also: adding a simple combo box to test IE bleed through problem: |
</p> |
|
<select> |
<option>test for</option> |
<option>IE bleed through</option> |
<option>problem</option> |
</select> |
<h3>Some tests:</h3> |
<ol> |
<li>Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]</li> |
<li>Type in DX - input box shows DX and no dropdown.</li> |
<li>Open dropdown, click an item, it selects and closes dropdown.</li> |
<li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li> |
<li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li> |
<li>Tab into the combo works, list should not apear.</li> |
<li>Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").</li> |
<li>Do the dropdown and click outside of it - the dropdown disappears.</li> |
<li>Javascript disabled -> fallback to old style combo?</li> |
<li>Can you paste in the start of a match? [no]</li> |
<li>Backspace to start - dropdown shows all all items</li> |
<li>Backspace deselects last character [Borked: currently you have to backspace twice]</li> |
<li>Press down key to open dropdown</li> |
<li>Down and up keys select previous/next in dropdown.</li> |
<li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li> |
<li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li> |
<li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li> |
<li>Check that pressing escape undoes the previous action and closes the dropdown</li> |
<li>Check that pressing escape again clears the input box.</li> |
<li>In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)</li> |
<li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li> |
<li>Check dropdown is aligned correctly with bottom of the text input</li> |
<li>Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)</li> |
<li>Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]</li> |
<li>Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)</li> |
<li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li> |
<li>Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)</li> |
<li>Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?</li> |
<li>(Add any other tests here)</li> |
</ol> |
<div id="debugbox"></div> |
<!-- maintain state of combo box if user presses back/forward button --> |
<form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form> |
</body> |
</html> |