+++ /dev/null
-<!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";
- .dj_ie INPUT#setvaluetest { font-family: Courier; } /* help IE with font inheritance
- </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.setAttribute('disabled',!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> (200% Courier font):
- <select id="setvaluetest"
- name="state1"
- dojoType="dijit.form.ComboBox"
- class="medium"
- style="width:50%;font-size:200%;font-family:Courier;"
- 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>
- <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
- <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')">
- <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')">
-
- <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> (8pt font):
- <input dojoType="dijit.form.ComboBox"
- value="California"
- class="medium"
- store="stateStore"
- searchAttr="name"
- style="width: 200px; font-size: 8pt;"
- name="state2"
- onChange="setVal2"
- id="datatest"
- >
- <span>Value: <input id="value2" disabled value="California"></span>
- <hr>
- <label for="datatestDijit">Dijit List test #1</label> (150% font):
- <input dojoType="dijit.form.ComboBox"
- value="dijit.Editor"
- class="medium"
- store="dijitStore"
- searchAttr="className"
- style="width: 200px; font-size: 150%;"
- 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>
projects / eow / blobdiff