-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
- Ext.QuickTips.init();\r
-\r
- // simple array store\r
- var store = new Ext.data.SimpleStore({\r
- fields: ['abbr', 'state', 'nick'],\r
- data : Ext.exampledata.states // from states.js\r
- });\r
- var combo = new Ext.form.ComboBox({\r
- store: store,\r
- displayField:'state',\r
- typeAhead: true,\r
- mode: 'local',\r
- forceSelection: true,\r
- triggerAction: 'all',\r
- emptyText:'Select a state...',\r
- selectOnFocus:true,\r
- applyTo: 'local-states'\r
- });\r
- \r
- //Simple arrays can be used directly as the store config. 1-dimensional arrays\r
- //will automatically be expanded (each array item will be the combo value and text)\r
- //and for multi-dimensional arrays, the value in index 0 of each item will be assumed\r
- //to be the value, while the value at index 1 is assumed to be the text. For example,\r
- //[['AL', 'Alabama'],['AK', 'Alaska'], etc.]. Any other values beyond index 1 within\r
- //each item will be ignored using this approach.\r
- var comboFromArray = new Ext.form.ComboBox({\r
- store: Ext.exampledata.states,\r
- typeAhead: true,\r
- forceSelection: true,\r
- triggerAction: 'all',\r
- emptyText:'Select a state...',\r
- selectOnFocus:true,\r
- applyTo: 'array-states'\r
- });\r
-\r
- var comboWithTooltip = new Ext.form.ComboBox({\r
- tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',\r
- store: store,\r
- displayField:'state',\r
- typeAhead: true,\r
- forceSelection: true,\r
- mode: 'local',\r
- triggerAction: 'all',\r
- emptyText:'Select a state...',\r
- selectOnFocus:true,\r
- applyTo: 'local-states-with-qtip'\r
- });\r
-\r
- var converted = new Ext.form.ComboBox({\r
- typeAhead: true,\r
- triggerAction: 'all',\r
- transform:'state',\r
- width:135,\r
- forceSelection:true\r
- });\r
- \r
-// Create code view Panels. Ignore.\r
- new Ext.Panel({\r
- contentEl: 'state-combo-code',\r
- width: Ext.getBody().child('p').getWidth(),\r
- title: 'View code to create this combo',\r
- hideCollapseTool: true,\r
- titleCollapse: true,\r
- collapsible: true,\r
- collapsed: true,\r
- renderTo: 'state-combo-code-panel'\r
- });\r
- new Ext.Panel({\r
- contentEl: 'state-combo-qtip-code',\r
- autoScroll: true,\r
- width: Ext.getBody().child('p').getWidth(),\r
- title: 'View code to create this combo',\r
- hideCollapseTool: true,\r
- titleCollapse: true,\r
- collapsible: true,\r
- collapsed: true,\r
- renderTo: 'state-combo-qtip-code-panel'\r
- });\r
- new Ext.Panel({\r
- contentEl: 'array-combo-code',\r
- autoScroll: true,\r
- width: Ext.getBody().child('p').getWidth(),\r
- title: 'View code to create this combo',\r
- hideCollapseTool: true,\r
- titleCollapse: true,\r
- collapsible: true,\r
- collapsed: true,\r
- renderTo: 'array-combo-code-panel'\r
- });\r
- new Ext.Panel({\r
- contentEl: 'transformed-combo-code',\r
- autoScroll: true,\r
- width: Ext.getBody().child('p').getWidth(),\r
- title: 'View code to create this combo',\r
- hideCollapseTool: true,\r
- titleCollapse: true,\r
- collapsible: true,\r
- collapsed: true,\r
- renderTo: 'transformed-combo-code-panel'\r
- });\r
-\r
-});
\ No newline at end of file
+Ext.require([
+ 'Ext.form.field.ComboBox',
+ 'Ext.form.FieldSet',
+ 'Ext.tip.QuickTipManager',
+ 'Ext.data.*'
+]);
+
+Ext.onReady(function() {
+ Ext.tip.QuickTipManager.init();
+
+ // Define the model for a State
+ Ext.define('State', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {type: 'string', name: 'abbr'},
+ {type: 'string', name: 'name'},
+ {type: 'string', name: 'slogan'}
+ ]
+ });
+
+ // The data for all states
+ var states = [
+ {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
+ {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
+ {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
+ {"abbr":"AR","name":"Arkansas","slogan":"The Natural State"},
+ {"abbr":"CA","name":"California","slogan":"The Golden State"},
+ {"abbr":"CO","name":"Colorado","slogan":"The Mountain State"},
+ {"abbr":"CT","name":"Connecticut","slogan":"The Constitution State"},
+ {"abbr":"DE","name":"Delaware","slogan":"The First State"},
+ {"abbr":"DC","name":"District of Columbia","slogan":"The Nation's Capital"},
+ {"abbr":"FL","name":"Florida","slogan":"The Sunshine State"},
+ {"abbr":"GA","name":"Georgia","slogan":"The Peach State"},
+ {"abbr":"HI","name":"Hawaii","slogan":"The Aloha State"},
+ {"abbr":"ID","name":"Idaho","slogan":"Famous Potatoes"},
+ {"abbr":"IL","name":"Illinois","slogan":"The Prairie State"},
+ {"abbr":"IN","name":"Indiana","slogan":"The Hospitality State"},
+ {"abbr":"IA","name":"Iowa","slogan":"The Corn State"},
+ {"abbr":"KS","name":"Kansas","slogan":"The Sunflower State"},
+ {"abbr":"KY","name":"Kentucky","slogan":"The Bluegrass State"},
+ {"abbr":"LA","name":"Louisiana","slogan":"The Bayou State"},
+ {"abbr":"ME","name":"Maine","slogan":"The Pine Tree State"},
+ {"abbr":"MD","name":"Maryland","slogan":"Chesapeake State"},
+ {"abbr":"MA","name":"Massachusetts","slogan":"The Spirit of America"},
+ {"abbr":"MI","name":"Michigan","slogan":"Great Lakes State"},
+ {"abbr":"MN","name":"Minnesota","slogan":"North Star State"},
+ {"abbr":"MS","name":"Mississippi","slogan":"Magnolia State"},
+ {"abbr":"MO","name":"Missouri","slogan":"Show Me State"},
+ {"abbr":"MT","name":"Montana","slogan":"Big Sky Country"},
+ {"abbr":"NE","name":"Nebraska","slogan":"Beef State"},
+ {"abbr":"NV","name":"Nevada","slogan":"Silver State"},
+ {"abbr":"NH","name":"New Hampshire","slogan":"Granite State"},
+ {"abbr":"NJ","name":"New Jersey","slogan":"Garden State"},
+ {"abbr":"NM","name":"New Mexico","slogan":"Land of Enchantment"},
+ {"abbr":"NY","name":"New York","slogan":"Empire State"},
+ {"abbr":"NC","name":"North Carolina","slogan":"First in Freedom"},
+ {"abbr":"ND","name":"North Dakota","slogan":"Peace Garden State"},
+ {"abbr":"OH","name":"Ohio","slogan":"The Heart of it All"},
+ {"abbr":"OK","name":"Oklahoma","slogan":"Oklahoma is OK"},
+ {"abbr":"OR","name":"Oregon","slogan":"Pacific Wonderland"},
+ {"abbr":"PA","name":"Pennsylvania","slogan":"Keystone State"},
+ {"abbr":"RI","name":"Rhode Island","slogan":"Ocean State"},
+ {"abbr":"SC","name":"South Carolina","slogan":"Nothing Could be Finer"},
+ {"abbr":"SD","name":"South Dakota","slogan":"Great Faces, Great Places"},
+ {"abbr":"TN","name":"Tennessee","slogan":"Volunteer State"},
+ {"abbr":"TX","name":"Texas","slogan":"Lone Star State"},
+ {"abbr":"UT","name":"Utah","slogan":"Salt Lake State"},
+ {"abbr":"VT","name":"Vermont","slogan":"Green Mountain State"},
+ {"abbr":"VA","name":"Virginia","slogan":"Mother of States"},
+ {"abbr":"WA","name":"Washington","slogan":"Green Tree State"},
+ {"abbr":"WV","name":"West Virginia","slogan":"Mountain State"},
+ {"abbr":"WI","name":"Wisconsin","slogan":"America's Dairyland"},
+ {"abbr":"WY","name":"Wyoming","slogan":"Like No Place on Earth"}
+ ];
+
+ // The data store holding the states; shared by each of the ComboBox examples below
+ var store = Ext.create('Ext.data.Store', {
+ model: 'State',
+ data: states
+ });
+
+ // Simple ComboBox using the data store
+ var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
+ fieldLabel: 'Select a single state',
+ renderTo: 'simpleCombo',
+ displayField: 'name',
+ width: 320,
+ labelWidth: 130,
+ store: store,
+ queryMode: 'local',
+ typeAhead: true
+ });
+
+ // ComboBox with a custom item template
+ var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
+ fieldLabel: 'Select a single state',
+ renderTo: 'customTplCombo',
+ displayField: 'name',
+ width: 320,
+ labelWidth: 130,
+ store: store,
+ queryMode: 'local',
+
+ listConfig: {
+ getInnerTpl: function() {
+ return '<div data-qtip="{name}. {slogan}">{name} ({abbr})</div>';
+ }
+ }
+ });
+
+ // ComboBox with multiple selection enabled
+ var multiCombo = Ext.create('Ext.form.field.ComboBox', {
+ fieldLabel: 'Select multiple states',
+ renderTo: 'multiSelectCombo',
+ multiSelect: true,
+ displayField: 'name',
+ width: 320,
+ labelWidth: 130,
+ store: store,
+ queryMode: 'local'
+ });
+
+ // ComboBox transformed from HTML select
+ var transformed = Ext.create('Ext.form.field.ComboBox', {
+ typeAhead: true,
+ transform: 'stateSelect',
+ width: 135,
+ forceSelection: true
+ });
+
+
+ ////// Collapsible code panels; ignore: /////
+
+ Ext.select('pre.code').each(function(pre) {
+ Ext.create('Ext.form.FieldSet', {
+ contentEl: pre,
+ renderTo: pre.parent(),
+ title: 'View code for this example',
+ collapsible: true,
+ collapsed: true
+ })
+ });
+
+
+});
git.ithinksw.org / extjs.git / blobdiff