| 2150 |
mathias |
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
|
2 |
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
<title>Dojo ComboBox Widget Test</title>
|
|
|
6 |
<style>
|
|
|
7 |
@import "../../../dojo/resources/dojo.css";
|
|
|
8 |
@import "../css/dijitTests.css";
|
|
|
9 |
</style>
|
|
|
10 |
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
|
11 |
djConfig="isDebug: true, parseOnLoad: true"></script>
|
|
|
12 |
<script type="text/javascript" src="../_testCommon.js"></script>
|
|
|
13 |
|
|
|
14 |
<script type="text/javascript">
|
|
|
15 |
dojo.require("dojo.data.ItemFileReadStore");
|
|
|
16 |
dojo.require("dijit.form.ComboBox");
|
|
|
17 |
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
|
|
18 |
|
|
|
19 |
function setVal1(val){
|
|
|
20 |
dojo.byId('value1').value=val;
|
|
|
21 |
}
|
|
|
22 |
function setVal2(val){
|
|
|
23 |
dojo.byId('value2').value=val;
|
|
|
24 |
console.debug("Value changed to ["+val+"] in second ComboBox (#1652)");
|
|
|
25 |
}
|
|
|
26 |
function setVal3(val){
|
|
|
27 |
dojo.byId('value3').value=val;
|
|
|
28 |
}
|
|
|
29 |
function setVal4(val){
|
|
|
30 |
dojo.byId('value4').value=val;
|
|
|
31 |
}
|
|
|
32 |
var combo;
|
|
|
33 |
function init(){
|
|
|
34 |
var store = new dojo.data.ItemFileReadStore({url: '../_data/states.json'});
|
|
|
35 |
combo = new dijit.form.ComboBox({
|
|
|
36 |
name:"prog",
|
|
|
37 |
autoComplete:false,
|
|
|
38 |
store: store,
|
|
|
39 |
searchAttr:"name"
|
|
|
40 |
}, dojo.byId("progCombo"));
|
|
|
41 |
|
|
|
42 |
var store2 = new dojo.data.ItemFileReadStore({url: '../../demos/i18n/data.json'});
|
|
|
43 |
combo = new dijit.form.ComboBox({
|
|
|
44 |
name:"prog2",
|
|
|
45 |
autoComplete:false,
|
|
|
46 |
store:store2,
|
|
|
47 |
query:{type:'country'},
|
|
|
48 |
searchAttr:"name"
|
|
|
49 |
}, dojo.byId("progCombo2"));
|
|
|
50 |
}
|
|
|
51 |
dojo.addOnLoad(init);
|
|
|
52 |
|
|
|
53 |
function toggleDisabled(button, widget){
|
|
|
54 |
widget = dijit.byId(widget);
|
|
|
55 |
button = dojo.byId(button);
|
|
|
56 |
widget.setDisabled(!widget.disabled);
|
|
|
57 |
button.innerHTML= widget.disabled ? "Enable" : "Disable";
|
|
|
58 |
}
|
|
|
59 |
</script>
|
|
|
60 |
</head>
|
|
|
61 |
|
|
|
62 |
<body>
|
|
|
63 |
<h1>Dojo ComboBox Widget Test</h1>
|
|
|
64 |
<p>
|
|
|
65 |
A ComboBox is like a text <input> field (ie, you can input any value you want),
|
|
|
66 |
but it also has a list of suggested values that you can choose from.
|
|
|
67 |
The drop down list is filtered by the data you have already typed in.
|
|
|
68 |
</p>
|
|
|
69 |
<form action="#" method="GET">
|
|
|
70 |
|
|
|
71 |
<p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p>
|
|
|
72 |
<label for="setvaluetest">US State test 1: </label>
|
|
|
73 |
<select id="setvaluetest"
|
|
|
74 |
name="state1"
|
|
|
75 |
dojoType="dijit.form.ComboBox"
|
|
|
76 |
class="medium"
|
|
|
77 |
style="width:50%;font-size:15pt;"
|
|
|
78 |
name="foo.bar1"
|
|
|
79 |
autoComplete="false"
|
|
|
80 |
onChange="dojo.byId('oc1').value=arguments[0]"
|
|
|
81 |
pageSize="30"
|
|
|
82 |
>
|
|
|
83 |
<option></option>
|
|
|
84 |
<option>Alabama</option>
|
|
|
85 |
<option>Alaska</option>
|
|
|
86 |
<option>American Samoa</option>
|
|
|
87 |
<option>Arizona</option>
|
|
|
88 |
<option>Arkansas</option>
|
|
|
89 |
<option>Armed Forces Europe</option>
|
|
|
90 |
<option>Armed Forces Pacific</option>
|
|
|
91 |
<option>Armed Forces the Americas</option>
|
|
|
92 |
<option>California</option>
|
|
|
93 |
<option>Colorado</option>
|
|
|
94 |
<option>Connecticut</option>
|
|
|
95 |
<option>Delaware</option>
|
|
|
96 |
<option>District of Columbia</option>
|
|
|
97 |
<option>Federated States of Micronesia</option>
|
|
|
98 |
<option>Florida</option>
|
|
|
99 |
<option>Georgia</option>
|
|
|
100 |
<option>Guam</option>
|
|
|
101 |
<option>Hawaii</option>
|
|
|
102 |
<option>Idaho</option>
|
|
|
103 |
<option>Illinois</option>
|
|
|
104 |
<option>Indiana</option>
|
|
|
105 |
<option selected>Iowa</option>
|
|
|
106 |
<option>Kansas</option>
|
|
|
107 |
<option>Kentucky</option>
|
|
|
108 |
<option>Louisiana</option>
|
|
|
109 |
<option>Maine</option>
|
|
|
110 |
<option>Marshall Islands</option>
|
|
|
111 |
<option>Maryland</option>
|
|
|
112 |
<option>Massachusetts</option>
|
|
|
113 |
<option>Michigan</option>
|
|
|
114 |
<option>Minnesota</option>
|
|
|
115 |
<option>Mississippi</option>
|
|
|
116 |
<option>Missouri</option>
|
|
|
117 |
<option>Montana</option>
|
|
|
118 |
<option>Nebraska</option>
|
|
|
119 |
<option>Nevada</option>
|
|
|
120 |
<option>New Hampshire</option>
|
|
|
121 |
<option>New Jersey</option>
|
|
|
122 |
<option>New Mexico</option>
|
|
|
123 |
<option>New York</option>
|
|
|
124 |
<option>North Carolina</option>
|
|
|
125 |
<option>North Dakota</option>
|
|
|
126 |
<option>Northern Mariana Islands</option>
|
|
|
127 |
<option>Ohio</option>
|
|
|
128 |
<option>Oklahoma</option>
|
|
|
129 |
<option>Oregon</option>
|
|
|
130 |
<option>Pennsylvania</option>
|
|
|
131 |
<option>Puerto Rico</option>
|
|
|
132 |
<option>Rhode Island</option>
|
|
|
133 |
<option>South Carolina</option>
|
|
|
134 |
<option>South Dakota</option>
|
|
|
135 |
<option>Tennessee</option>
|
|
|
136 |
<option>Texas</option>
|
|
|
137 |
<option>Utah</option>
|
|
|
138 |
<option>Vermont</option>
|
|
|
139 |
<option>Virgin Islands, U.S.</option>
|
|
|
140 |
<option>Virginia</option>
|
|
|
141 |
<option>Washington</option>
|
|
|
142 |
<option>West Virginia</option>
|
|
|
143 |
<option>Wisconsin</option>
|
|
|
144 |
<option>Wyoming</option>
|
|
|
145 |
</select>
|
|
|
146 |
onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
|
|
|
147 |
|
|
|
148 |
<hr>
|
|
|
149 |
|
|
|
150 |
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
|
|
|
151 |
url="../_data/states.json"></div>
|
|
|
152 |
|
|
|
153 |
<div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore"
|
|
|
154 |
url="../_data/dijits.json"></div>
|
|
|
155 |
|
|
|
156 |
<p>ComboBox #2: url, autoComplete=true:</p>
|
|
|
157 |
<label for="datatest">US State test 2: </label>
|
|
|
158 |
<input dojoType="dijit.form.ComboBox"
|
|
|
159 |
value="California"
|
|
|
160 |
class="medium"
|
|
|
161 |
store="stateStore"
|
|
|
162 |
searchAttr="name"
|
|
|
163 |
style="width: 300px;"
|
|
|
164 |
name="state2"
|
|
|
165 |
onChange="setVal2"
|
|
|
166 |
id="datatest"
|
|
|
167 |
>
|
|
|
168 |
<span>Value: <input id="value2" disabled value="California"></span>
|
|
|
169 |
<hr>
|
|
|
170 |
<label for="datatest">Dijit List test #1: </label>
|
|
|
171 |
<input dojoType="dijit.form.ComboBox"
|
|
|
172 |
value="dijit.Editor"
|
|
|
173 |
class="medium"
|
|
|
174 |
store="dijitStore"
|
|
|
175 |
searchAttr="className"
|
|
|
176 |
style="width: 300px;"
|
|
|
177 |
name="dijitList1"
|
|
|
178 |
id="datatestDijit"
|
|
|
179 |
>
|
|
|
180 |
<span>Hey look, this one is kind of useful.</span>
|
|
|
181 |
<hr>
|
|
|
182 |
|
|
|
183 |
<p>ComboBox #3: initially disabled, url, autoComplete=false:</p>
|
|
|
184 |
<label for="combo3">US State test 3: </label>
|
|
|
185 |
<input id="combo3"
|
|
|
186 |
dojoType="dijit.form.ComboBox"
|
|
|
187 |
value="California"
|
|
|
188 |
class="medium"
|
|
|
189 |
store="stateStore"
|
|
|
190 |
searchAttr="name"
|
|
|
191 |
style="width: 300px;"
|
|
|
192 |
name="state3"
|
|
|
193 |
autoComplete="false"
|
|
|
194 |
onChange="setVal3"
|
|
|
195 |
disabled
|
|
|
196 |
>
|
|
|
197 |
<span>Value: <input id="value3" disabled></span>
|
|
|
198 |
<div>
|
|
|
199 |
<button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button>
|
|
|
200 |
</div>
|
|
|
201 |
<hr>
|
|
|
202 |
<p>ComboBox #4: url, autoComplete=false required=true:</p>
|
|
|
203 |
<label for="combobox4">US State test 4: </label>
|
|
|
204 |
<input dojoType="dijit.form.ComboBox"
|
|
|
205 |
value=""
|
|
|
206 |
class="medium"
|
|
|
207 |
store="stateStore"
|
|
|
208 |
searchAttr="name"
|
|
|
209 |
style="width: 300px;"
|
|
|
210 |
name="state4"
|
|
|
211 |
onChange="setVal4"
|
|
|
212 |
autoComplete="false"
|
|
|
213 |
id="combobox4"
|
|
|
214 |
required="true"
|
|
|
215 |
>
|
|
|
216 |
<span>Value: <input id="value4" disabled></span>
|
|
|
217 |
<hr>
|
|
|
218 |
<p>A ComboBox with no arrow</p>
|
|
|
219 |
<input dojoType="dijit.form.ComboBox"
|
|
|
220 |
value="California"
|
|
|
221 |
store="stateStore"
|
|
|
222 |
searchAttr="name"
|
|
|
223 |
name="state5"
|
|
|
224 |
autoComplete="false"
|
|
|
225 |
hasDownArrow="false"
|
|
|
226 |
>
|
|
|
227 |
<hr>
|
|
|
228 |
<p>A combo created by createWidget</p>
|
|
|
229 |
<input id="progCombo">
|
|
|
230 |
<hr>
|
|
|
231 |
<p>A ComboBox with an initial query. (Limits list to items with type = country.)</p>
|
|
|
232 |
<input id="progCombo2">
|
|
|
233 |
<hr>
|
|
|
234 |
<input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input>
|
|
|
235 |
<input type="submit">
|
|
|
236 |
|
|
|
237 |
</form>
|
|
|
238 |
<p>
|
|
|
239 |
This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned.
|
|
|
240 |
also: adding a simple combo box to test IE bleed through problem:
|
|
|
241 |
</p>
|
|
|
242 |
|
|
|
243 |
<select>
|
|
|
244 |
<option>test for</option>
|
|
|
245 |
<option>IE bleed through</option>
|
|
|
246 |
<option>problem</option>
|
|
|
247 |
</select>
|
|
|
248 |
<h3>Some tests:</h3>
|
|
|
249 |
<ol>
|
|
|
250 |
<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>
|
|
|
251 |
<li>Type in DX - input box shows DX and no dropdown.</li>
|
|
|
252 |
<li>Open dropdown, click an item, it selects and closes dropdown.</li>
|
|
|
253 |
<li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li>
|
|
|
254 |
<li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li>
|
|
|
255 |
<li>Tab into the combo works, list should not apear.</li>
|
|
|
256 |
<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>
|
|
|
257 |
<li>Do the dropdown and click outside of it - the dropdown disappears.</li>
|
|
|
258 |
<li>Javascript disabled -> fallback to old style combo?</li>
|
|
|
259 |
<li>Can you paste in the start of a match? [no]</li>
|
|
|
260 |
<li>Backspace to start - dropdown shows all all items</li>
|
|
|
261 |
<li>Backspace deselects last character [Borked: currently you have to backspace twice]</li>
|
|
|
262 |
<li>Press down key to open dropdown</li>
|
|
|
263 |
<li>Down and up keys select previous/next in dropdown.</li>
|
|
|
264 |
<li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li>
|
|
|
265 |
<li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li>
|
|
|
266 |
<li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li>
|
|
|
267 |
<li>Check that pressing escape undoes the previous action and closes the dropdown</li>
|
|
|
268 |
<li>Check that pressing escape again clears the input box.</li>
|
|
|
269 |
<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>
|
|
|
270 |
<li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li>
|
|
|
271 |
<li>Check dropdown is aligned correctly with bottom of the text input</li>
|
|
|
272 |
<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>
|
|
|
273 |
<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>
|
|
|
274 |
<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>
|
|
|
275 |
<li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li>
|
|
|
276 |
<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>
|
|
|
277 |
<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>
|
|
|
278 |
<li>(Add any other tests here)</li>
|
|
|
279 |
</ol>
|
|
|
280 |
<div id="debugbox"></div>
|
|
|
281 |
<!-- maintain state of combo box if user presses back/forward button -->
|
|
|
282 |
<form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>
|
|
|
283 |
</body>
|
|
|
284 |
</html>
|