examples/form/combos.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.form.field.ComboBox',
  17     'Ext.form.FieldSet',
  18     'Ext.tip.QuickTipManager',
  19     'Ext.data.*'
  20 ]);
  21
  22 Ext.onReady(function() {
  23     Ext.tip.QuickTipManager.init();
  24
  25     // Define the model for a State
  26     Ext.define('State', {
  27         extend: 'Ext.data.Model',
  28         fields: [
  29             {type: 'string', name: 'abbr'},
  30             {type: 'string', name: 'name'},
  31             {type: 'string', name: 'slogan'}
  32         ]
  33     });
  34
  35     // The data for all states
  36     var states = [
  37         {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
  38         {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
  39         {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
  40         {"abbr":"AR","name":"Arkansas","slogan":"The Natural State"},
  41         {"abbr":"CA","name":"California","slogan":"The Golden State"},
  42         {"abbr":"CO","name":"Colorado","slogan":"The Mountain State"},
  43         {"abbr":"CT","name":"Connecticut","slogan":"The Constitution State"},
  44         {"abbr":"DE","name":"Delaware","slogan":"The First State"},
  45         {"abbr":"DC","name":"District of Columbia","slogan":"The Nation's Capital"},
  46         {"abbr":"FL","name":"Florida","slogan":"The Sunshine State"},
  47         {"abbr":"GA","name":"Georgia","slogan":"The Peach State"},
  48         {"abbr":"HI","name":"Hawaii","slogan":"The Aloha State"},
  49         {"abbr":"ID","name":"Idaho","slogan":"Famous Potatoes"},
  50         {"abbr":"IL","name":"Illinois","slogan":"The Prairie State"},
  51         {"abbr":"IN","name":"Indiana","slogan":"The Hospitality State"},
  52         {"abbr":"IA","name":"Iowa","slogan":"The Corn State"},
  53         {"abbr":"KS","name":"Kansas","slogan":"The Sunflower State"},
  54         {"abbr":"KY","name":"Kentucky","slogan":"The Bluegrass State"},
  55         {"abbr":"LA","name":"Louisiana","slogan":"The Bayou State"},
  56         {"abbr":"ME","name":"Maine","slogan":"The Pine Tree State"},
  57         {"abbr":"MD","name":"Maryland","slogan":"Chesapeake State"},
  58         {"abbr":"MA","name":"Massachusetts","slogan":"The Spirit of America"},
  59         {"abbr":"MI","name":"Michigan","slogan":"Great Lakes State"},
  60         {"abbr":"MN","name":"Minnesota","slogan":"North Star State"},
  61         {"abbr":"MS","name":"Mississippi","slogan":"Magnolia State"},
  62         {"abbr":"MO","name":"Missouri","slogan":"Show Me State"},
  63         {"abbr":"MT","name":"Montana","slogan":"Big Sky Country"},
  64         {"abbr":"NE","name":"Nebraska","slogan":"Beef State"},
  65         {"abbr":"NV","name":"Nevada","slogan":"Silver State"},
  66         {"abbr":"NH","name":"New Hampshire","slogan":"Granite State"},
  67         {"abbr":"NJ","name":"New Jersey","slogan":"Garden State"},
  68         {"abbr":"NM","name":"New Mexico","slogan":"Land of Enchantment"},
  69         {"abbr":"NY","name":"New York","slogan":"Empire State"},
  70         {"abbr":"NC","name":"North Carolina","slogan":"First in Freedom"},
  71         {"abbr":"ND","name":"North Dakota","slogan":"Peace Garden State"},
  72         {"abbr":"OH","name":"Ohio","slogan":"The Heart of it All"},
  73         {"abbr":"OK","name":"Oklahoma","slogan":"Oklahoma is OK"},
  74         {"abbr":"OR","name":"Oregon","slogan":"Pacific Wonderland"},
  75         {"abbr":"PA","name":"Pennsylvania","slogan":"Keystone State"},
  76         {"abbr":"RI","name":"Rhode Island","slogan":"Ocean State"},
  77         {"abbr":"SC","name":"South Carolina","slogan":"Nothing Could be Finer"},
  78         {"abbr":"SD","name":"South Dakota","slogan":"Great Faces, Great Places"},
  79         {"abbr":"TN","name":"Tennessee","slogan":"Volunteer State"},
  80         {"abbr":"TX","name":"Texas","slogan":"Lone Star State"},
  81         {"abbr":"UT","name":"Utah","slogan":"Salt Lake State"},
  82         {"abbr":"VT","name":"Vermont","slogan":"Green Mountain State"},
  83         {"abbr":"VA","name":"Virginia","slogan":"Mother of States"},
  84         {"abbr":"WA","name":"Washington","slogan":"Green Tree State"},
  85         {"abbr":"WV","name":"West Virginia","slogan":"Mountain State"},
  86         {"abbr":"WI","name":"Wisconsin","slogan":"America's Dairyland"},
  87         {"abbr":"WY","name":"Wyoming","slogan":"Like No Place on Earth"}
  88     ];
  89
  90     // The data store holding the states; shared by each of the ComboBox examples below
  91     var store = Ext.create('Ext.data.Store', {
  92         model: 'State',
  93         data: states
  94     });
  95
  96     // Simple ComboBox using the data store
  97     var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
  98         fieldLabel: 'Select a single state',
  99         renderTo: 'simpleCombo',
 100         displayField: 'name',
 101         width: 320,
 102         labelWidth: 130,
 103         store: store,
 104         queryMode: 'local',
 105         typeAhead: true
 106     });
 107
 108     // ComboBox with a custom item template
 109     var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
 110         fieldLabel: 'Select a single state',
 111         renderTo: 'customTplCombo',
 112         displayField: 'name',
 113         width: 320,
 114         labelWidth: 130,
 115         store: store,
 116         queryMode: 'local',
 117
 118         listConfig: {
 119             getInnerTpl: function() {
 120                 return '<div data-qtip="{name}. {slogan}">{name} ({abbr})</div>';
 121             }
 122         }
 123     });
 124
 125     // ComboBox with multiple selection enabled
 126     var multiCombo = Ext.create('Ext.form.field.ComboBox', {
 127         fieldLabel: 'Select multiple states',
 128         renderTo: 'multiSelectCombo',
 129         multiSelect: true,
 130         displayField: 'name',
 131         width: 320,
 132         labelWidth: 130,
 133         store: store,
 134         queryMode: 'local'
 135     });
 136
 137     // ComboBox transformed from HTML select
 138     var transformed = Ext.create('Ext.form.field.ComboBox', {
 139         typeAhead: true,
 140         transform: 'stateSelect',
 141         width: 135,
 142         forceSelection: true
 143     });
 144
 145
 146     ////// Collapsible code panels; ignore: /////
 147
 148     Ext.select('pre.code').each(function(pre) {
 149         Ext.create('Ext.form.FieldSet', {
 150             contentEl: pre,
 151             renderTo: pre.parent(),
 152             title: 'View code for this example',
 153             collapsible: true,
 154             collapsed: true
 155         })
 156     });
 157
 158
 159 });
 160