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>