Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / examples / form / combos.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5     <title>Combo Boxes</title>
6
7     <!-- ExtJS -->
8     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
9     <script type="text/javascript" src="../../bootstrap.js"></script>
10
11     <!-- Shared -->
12     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
13
14     <!-- Example -->
15     <script type="text/javascript" src="combos.js"></script>
16     <style type="text/css">
17         .example {
18             width: 600px;
19             border: 1px solid #CCC;
20             padding: 0 10px;
21             margin: 0 0 10px;
22         }
23         .x-fieldset {
24             margin-top: 20px;
25         }
26         #transformCombo label {
27             display: block;
28             margin: 1em 0 2px;
29         }
30     </style>
31
32 </head>
33 <body>
34
35 <h1>Combo Boxes</h1>
36 <p>The js is not minified so it is readable. See <a href="combos.js">combos.js</a>.</p>
37
38 <div class="example">
39     <h2>Data Sources</h2>
40     <p>The combo box can use any type of Ext.data.Store as its data source.
41     This means your data can be XML, JSON, arrays or any other supported format. It can be loaded using
42     Ajax, via script tags or locally. This combo uses local data from a JS array:</p>
43
44     <div id="simpleCombo"></div>
45
46     <pre class="code x-hide-display" id="simpleComboCode">// Define the model for a State
47 Ext.regModel('State', {
48     fields: [
49         {type: 'string', name: 'abbr'},
50         {type: 'string', name: 'name'},
51         {type: 'string', name: 'slogan'}
52     ]
53 });
54
55 // The data store holding the states
56 var store = Ext.create('Ext.data.Store', {
57     model: 'State',
58     data: states
59 });
60
61 // Simple ComboBox using the data store
62 var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
63     fieldLabel: 'Select a single state',
64     renderTo: 'simpleCombo',
65     displayField: 'name',
66     width: 500,
67     labelWidth: 130,
68     store: store,
69     queryMode: 'local',
70     typeAhead: true
71 });</pre>
72 </div>
73
74 <div class="example">
75     <h2>Custom Item Templates</h2>
76     <p>The combo below uses the same data, but also illustrates how to use an optional
77     custom template to create custom UI renditions for list items by overriding the getInnerTpl method. In this case
78     each item shows the state's abbreviation, and has a QuickTip which displays the state's nickname when hovered over.</p>
79
80     <div id="customTplCombo"></div>
81
82     <pre class="code x-hide-display" id="customTplComboCode">// Define the model for a State
83 Ext.regModel('State', {
84     fields: [
85         {type: 'string', name: 'abbr'},
86         {type: 'string', name: 'name'},
87         {type: 'string', name: 'slogan'}
88     ]
89 });
90
91 // The data store holding the states
92 var store = Ext.create('Ext.data.Store', {
93     model: 'State',
94     data: states
95 });
96
97 // ComboBox with a custom item template
98 var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
99     fieldLabel: 'Select a single state',
100     renderTo: 'customTplCombo',
101     displayField: 'name',
102     width: 500,
103     labelWidth: 130,
104     store: store,
105     queryMode: 'local',
106     listConfig: {
107         getInnerTpl: function() {
108             return '&lt;div data-qtip="{name}. {slogan}">{name} ({abbr})&lt;/div>';
109         }
110     }
111 });</pre>
112 </div>
113
114 <div class="example">
115     <h2>Multiple Selection</h2>
116     <p>The combo below uses the same data once again, but allows selecting multiple values.</p>
117
118     <div id="multiSelectCombo"></div>
119
120     <pre class="code x-hide-display" id="multiSelectComboCode">// Define the model for a State
121 Ext.regModel('State', {
122     fields: [
123         {type: 'string', name: 'abbr'},
124         {type: 'string', name: 'name'},
125         {type: 'string', name: 'slogan'}
126     ]
127 });
128
129 // The data store holding the states
130 var store = Ext.create('Ext.data.Store', {
131     model: 'State',
132     data: states
133 });
134
135 // ComboBox with multiple selection enabled
136 var multiCombo = Ext.create('Ext.form.field.ComboBox', {
137     fieldLabel: 'Select multiple states',
138     renderTo: 'multiSelectCombo',
139     multiSelect: true,
140     displayField: 'name',
141     width: 500,
142     labelWidth: 130,
143     store: store,
144     queryMode: 'local'
145 });</pre>
146 </div>
147
148 <div class="example">
149     <h2>Transformation</h2>
150     <p>ComboBoxes can also be created from existing HTML <code>&lt;select&gt;</code> elements on the page by
151     specifying the <code>transform</code> config. This allows creation of rich ComboBox fields with autocompletion
152     and list filtering, in an unobtrusive way.</p>
153
154     <div id="transformCombo">
155         <label for="stateSelect">Transformed select:</label>
156         <select name="state" id="stateSelect">
157         <option value="AL">Alabama</option>
158         <option value="AK">Alaska</option>
159         <option value="AZ">Arizona</option>
160         <option value="AR">Arkansas</option>
161         <option value="CA">California</option>
162         <option value="CO">Colorado</option>
163         <option value="CT">Connecticut</option>
164         <option value="DE">Delaware</option>
165         <option value="FL">Florida</option>
166         <option value="GA">Georgia</option>
167         <option value="HI">Hawaii</option>
168         <option value="ID">Idaho</option>
169         <option value="IL">Illinois</option>
170         <option value="IN">Indiana</option>
171         <option value="IA">Iowa</option>
172         <option value="KS">Kansas</option>
173         <option value="KY">Kentucky</option>
174         <option value="LA">Louisiana</option>
175         <option value="ME">Maine</option>
176         <option value="MD">Maryland</option>
177         <option value="MA">Massachusetts</option>
178         <option value="MI">Michigan</option>
179         <option value="MN">Minnesota</option>
180         <option value="MS">Mississippi</option>
181         <option value="MO">Missouri</option>
182         <option value="MT">Montana</option>
183         <option value="NE">Nebraska</option>
184         <option value="NV">Nevada</option>
185         <option value="NH">New Hampshire</option>
186         <option value="NJ">New Jersey</option>
187         <option value="NM">New Mexico</option>
188         <option value="NY">New York</option>
189         <option value="NC">North Carolina</option>
190         <option value="ND">North Dakota</option>
191         <option value="OH" selected>Ohio</option>
192         <option value="OK">Oklahoma</option>
193         <option value="OR">Oregon</option>
194         <option value="PA">Pennsylvania</option>
195         <option value="RI">Rhode Island</option>
196         <option value="SC">South Carolina</option>
197         <option value="SD">South Dakota</option>
198         <option value="TN">Tennessee</option>
199         <option value="TX">Texas</option>
200         <option value="UT">Utah</option>
201         <option value="VT">Vermont</option>
202         <option value="VA">Virginia</option>
203         <option value="WA">Washington</option>
204         <option value="WV">West Virginia</option>
205         <option value="WI">Wisconsin</option>
206         <option value="WY">Wyoming</option>
207         </select>
208
209         <label for="stateSelectOrig">Originally looked like:</label>
210         <select name="state-orig" id="stateSelectOrig">
211         <option value="AL">Alabama</option>
212         <option value="AK">Alaska</option>
213         <option value="AZ">Arizona</option>
214         <option value="AR">Arkansas</option>
215         <option value="CA">California</option>
216         <option value="CO">Colorado</option>
217         <option value="CT">Connecticut</option>
218         <option value="DE">Delaware</option>
219         <option value="FL">Florida</option>
220         <option value="GA">Georgia</option>
221         <option value="HI">Hawaii</option>
222         <option value="ID">Idaho</option>
223         <option value="IL">Illinois</option>
224         <option value="IN">Indiana</option>
225         <option value="IA">Iowa</option>
226         <option value="KS">Kansas</option>
227         <option value="KY">Kentucky</option>
228         <option value="LA">Louisiana</option>
229         <option value="ME">Maine</option>
230         <option value="MD">Maryland</option>
231         <option value="MA">Massachusetts</option>
232         <option value="MI">Michigan</option>
233         <option value="MN">Minnesota</option>
234         <option value="MS">Mississippi</option>
235         <option value="MO">Missouri</option>
236         <option value="MT">Montana</option>
237         <option value="NE">Nebraska</option>
238         <option value="NV">Nevada</option>
239         <option value="NH">New Hampshire</option>
240         <option value="NJ">New Jersey</option>
241         <option value="NM">New Mexico</option>
242         <option value="NY">New York</option>
243         <option value="NC">North Carolina</option>
244         <option value="ND">North Dakota</option>
245         <option value="OH" selected>Ohio</option>
246         <option value="OK">Oklahoma</option>
247         <option value="OR">Oregon</option>
248         <option value="PA">Pennsylvania</option>
249         <option value="RI">Rhode Island</option>
250         <option value="SC">South Carolina</option>
251         <option value="SD">South Dakota</option>
252         <option value="TN">Tennessee</option>
253         <option value="TX">Texas</option>
254         <option value="UT">Utah</option>
255         <option value="VT">Vermont</option>
256         <option value="VA">Virginia</option>
257         <option value="WA">Washington</option>
258         <option value="WV">West Virginia</option>
259         <option value="WI">Wisconsin</option>
260         <option value="WY">Wyoming</option>
261         </select>
262     </div>
263
264     <pre class="code x-hide-display" id="transformComboCode">var transformed = Ext.create('Ext.form.field.ComboBox', {
265     typeAhead: true,
266     transform: 'stateSelect',
267     width: 135,
268     forceSelection: true
269 });</pre>
270 </div>
271
272 </body>
273 </html>