examples/form/combos.js

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