X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/form/combos.js

diff --git a/examples/form/combos.js b/examples/form/combos.js
index 680a5487..eba739af 100644
--- a/examples/form/combos.js
+++ b/examples/form/combos.js
@@ -1,111 +1,145 @@
-/*
- * Ext JS Library 2.2.1
- * Copyright(c) 2006-2009, Ext JS, LLC.
- * licensing@extjs.com
- * 
- * http://extjs.com/license
- */
-
-Ext.onReady(function(){
-    Ext.QuickTips.init();
-
-    // simple array store
-    var store = new Ext.data.SimpleStore({
-        fields: ['abbr', 'state', 'nick'],
-        data : Ext.exampledata.states // from states.js
-    });
-    var combo = new Ext.form.ComboBox({
-        store: store,
-        displayField:'state',
-        typeAhead: true,
-        mode: 'local',
-        forceSelection: true,
-        triggerAction: 'all',
-        emptyText:'Select a state...',
-        selectOnFocus:true,
-        applyTo: 'local-states'
-    });
-    
-    //Simple arrays can be used directly as the store config.  1-dimensional arrays
-    //will automatically be expanded (each array item will be the combo value and text)
-    //and for multi-dimensional arrays, the value in index 0 of each item will be assumed
-    //to be the value, while the value at index 1 is assumed to be the text.  For example,
-    //[['AL', 'Alabama'],['AK', 'Alaska'], etc.]. Any other values beyond index 1 within
-    //each item will be ignored using this approach.
-	var comboFromArray = new Ext.form.ComboBox({
-	    store: Ext.exampledata.states,
-	    typeAhead: true,
-        forceSelection: true,
-	    triggerAction: 'all',
-	    emptyText:'Select a state...',
-	    selectOnFocus:true,
-	    applyTo: 'array-states'
-	});
-
-    var comboWithTooltip = new Ext.form.ComboBox({
-        tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
-        store: store,
-        displayField:'state',
-        typeAhead: true,
-        forceSelection: true,
-        mode: 'local',
-        triggerAction: 'all',
-        emptyText:'Select a state...',
-        selectOnFocus:true,
-        applyTo: 'local-states-with-qtip'
-    });
-
-    var converted = new Ext.form.ComboBox({
-        typeAhead: true,
-        triggerAction: 'all',
-        transform:'state',
-        width:135,
-        forceSelection:true
-    });
-    
-//  Create code view Panels. Ignore.
-    new Ext.Panel({
-    	contentEl: 'state-combo-code',
-    	width: Ext.getBody().child('p').getWidth(),
-    	title: 'View code to create this combo',
-    	hideCollapseTool: true,
-    	titleCollapse: true,
-    	collapsible: true,
-    	collapsed: true,
-    	renderTo: 'state-combo-code-panel'
-    });
-    new Ext.Panel({
-    	contentEl: 'state-combo-qtip-code',
-    	autoScroll: true,
-    	width: Ext.getBody().child('p').getWidth(),
-    	title: 'View code to create this combo',
-    	hideCollapseTool: true,
-    	titleCollapse: true,
-    	collapsible: true,
-    	collapsed: true,
-    	renderTo: 'state-combo-qtip-code-panel'
-    });
-    new Ext.Panel({
-    	contentEl: 'array-combo-code',
-    	autoScroll: true,
-    	width: Ext.getBody().child('p').getWidth(),
-    	title: 'View code to create this combo',
-    	hideCollapseTool: true,
-    	titleCollapse: true,
-    	collapsible: true,
-    	collapsed: true,
-    	renderTo: 'array-combo-code-panel'
-    });
-    new Ext.Panel({
-    	contentEl: 'transformed-combo-code',
-    	autoScroll: true,
-    	width: Ext.getBody().child('p').getWidth(),
-    	title: 'View code to create this combo',
-    	hideCollapseTool: true,
-    	titleCollapse: true,
-    	collapsible: true,
-    	collapsed: true,
-    	renderTo: 'transformed-combo-code-panel'
-    });
-
-});
\ 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
+        })
+    });
+
+
+});