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     getInnerTpl: function() {
 107         return '&lt;div data-qtip="{name}. {slogan}">{name} ({abbr})&lt;/div>';
 108     }
 109 });</pre>
 110 </div>
 111
 112 <div class="example">
 113     <h2>Multiple Selection</h2>
 114     <p>The combo below uses the same data once again, but allows selecting multiple values.</p>
 115
 116     <div id="multiSelectCombo"></div>
 117
 118     <pre class="code x-hide-display" id="multiSelectComboCode">// Define the model for a State
 119 Ext.regModel('State', {
 120     fields: [
 121         {type: 'string', name: 'abbr'},
 122         {type: 'string', name: 'name'},
 123         {type: 'string', name: 'slogan'}
 124     ]
 125 });
 126
 127 // The data store holding the states
 128 var store = Ext.create('Ext.data.Store', {
 129     model: 'State',
 130     data: states
 131 });
 132
 133 // ComboBox with multiple selection enabled
 134 var multiCombo = Ext.create('Ext.form.field.ComboBox', {
 135     fieldLabel: 'Select multiple states',
 136     renderTo: 'multiSelectCombo',
 137     multiSelect: true,
 138     displayField: 'name',
 139     width: 500,
 140     labelWidth: 130,
 141     store: store,
 142     queryMode: 'local'
 143 });</pre>
 144 </div>
 145
 146 <div class="example">
 147     <h2>Transformation</h2>
 148     <p>ComboBoxes can also be created from existing HTML <code>&lt;select&gt;</code> elements on the page by
 149     specifying the <code>transform</code> config. This allows creation of rich ComboBox fields with autocompletion
 150     and list filtering, in an unobtrusive way.</p>
 151
 152     <div id="transformCombo">
 153         <label for="stateSelect">Transformed select:</label>
 154         <select name="state" id="stateSelect">
 155         <option value="AL">Alabama</option>
 156         <option value="AK">Alaska</option>
 157         <option value="AZ">Arizona</option>
 158         <option value="AR">Arkansas</option>
 159         <option value="CA">California</option>
 160         <option value="CO">Colorado</option>
 161         <option value="CT">Connecticut</option>
 162         <option value="DE">Delaware</option>
 163         <option value="FL">Florida</option>
 164         <option value="GA">Georgia</option>
 165         <option value="HI">Hawaii</option>
 166         <option value="ID">Idaho</option>
 167         <option value="IL">Illinois</option>
 168         <option value="IN">Indiana</option>
 169         <option value="IA">Iowa</option>
 170         <option value="KS">Kansas</option>
 171         <option value="KY">Kentucky</option>
 172         <option value="LA">Louisiana</option>
 173         <option value="ME">Maine</option>
 174         <option value="MD">Maryland</option>
 175         <option value="MA">Massachusetts</option>
 176         <option value="MI">Michigan</option>
 177         <option value="MN">Minnesota</option>
 178         <option value="MS">Mississippi</option>
 179         <option value="MO">Missouri</option>
 180         <option value="MT">Montana</option>
 181         <option value="NE">Nebraska</option>
 182         <option value="NV">Nevada</option>
 183         <option value="NH">New Hampshire</option>
 184         <option value="NJ">New Jersey</option>
 185         <option value="NM">New Mexico</option>
 186         <option value="NY">New York</option>
 187         <option value="NC">North Carolina</option>
 188         <option value="ND">North Dakota</option>
 189         <option value="OH" selected>Ohio</option>
 190         <option value="OK">Oklahoma</option>
 191         <option value="OR">Oregon</option>
 192         <option value="PA">Pennsylvania</option>
 193         <option value="RI">Rhode Island</option>
 194         <option value="SC">South Carolina</option>
 195         <option value="SD">South Dakota</option>
 196         <option value="TN">Tennessee</option>
 197         <option value="TX">Texas</option>
 198         <option value="UT">Utah</option>
 199         <option value="VT">Vermont</option>
 200         <option value="VA">Virginia</option>
 201         <option value="WA">Washington</option>
 202         <option value="WV">West Virginia</option>
 203         <option value="WI">Wisconsin</option>
 204         <option value="WY">Wyoming</option>
 205         </select>
 206
 207         <label for="stateSelectOrig">Originally looked like:</label>
 208         <select name="state-orig" id="stateSelectOrig">
 209         <option value="AL">Alabama</option>
 210         <option value="AK">Alaska</option>
 211         <option value="AZ">Arizona</option>
 212         <option value="AR">Arkansas</option>
 213         <option value="CA">California</option>
 214         <option value="CO">Colorado</option>
 215         <option value="CT">Connecticut</option>
 216         <option value="DE">Delaware</option>
 217         <option value="FL">Florida</option>
 218         <option value="GA">Georgia</option>
 219         <option value="HI">Hawaii</option>
 220         <option value="ID">Idaho</option>
 221         <option value="IL">Illinois</option>
 222         <option value="IN">Indiana</option>
 223         <option value="IA">Iowa</option>
 224         <option value="KS">Kansas</option>
 225         <option value="KY">Kentucky</option>
 226         <option value="LA">Louisiana</option>
 227         <option value="ME">Maine</option>
 228         <option value="MD">Maryland</option>
 229         <option value="MA">Massachusetts</option>
 230         <option value="MI">Michigan</option>
 231         <option value="MN">Minnesota</option>
 232         <option value="MS">Mississippi</option>
 233         <option value="MO">Missouri</option>
 234         <option value="MT">Montana</option>
 235         <option value="NE">Nebraska</option>
 236         <option value="NV">Nevada</option>
 237         <option value="NH">New Hampshire</option>
 238         <option value="NJ">New Jersey</option>
 239         <option value="NM">New Mexico</option>
 240         <option value="NY">New York</option>
 241         <option value="NC">North Carolina</option>
 242         <option value="ND">North Dakota</option>
 243         <option value="OH" selected>Ohio</option>
 244         <option value="OK">Oklahoma</option>
 245         <option value="OR">Oregon</option>
 246         <option value="PA">Pennsylvania</option>
 247         <option value="RI">Rhode Island</option>
 248         <option value="SC">South Carolina</option>
 249         <option value="SD">South Dakota</option>
 250         <option value="TN">Tennessee</option>
 251         <option value="TX">Texas</option>
 252         <option value="UT">Utah</option>
 253         <option value="VT">Vermont</option>
 254         <option value="VA">Virginia</option>
 255         <option value="WA">Washington</option>
 256         <option value="WV">West Virginia</option>
 257         <option value="WI">Wisconsin</option>
 258         <option value="WY">Wyoming</option>
 259         </select>
 260     </div>
 261
 262     <pre class="code x-hide-display" id="transformComboCode">var transformed = Ext.create('Ext.form.field.ComboBox', {
 263     typeAhead: true,
 264     transform: 'stateSelect',
 265     width: 135,
 266     forceSelection: true
 267 });</pre>
 268 </div>
 269
 270 </body>
 271 </html>