examples/form/combos.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8     Ext.QuickTips.init();
   9
  10     // simple array store
  11     var store = new Ext.data.ArrayStore({
  12         fields: ['abbr', 'state', 'nick'],
  13         data : Ext.exampledata.states // from states.js
  14     });
  15     var combo = new Ext.form.ComboBox({
  16         store: store,
  17         displayField:'state',
  18         typeAhead: true,
  19         mode: 'local',
  20         forceSelection: true,
  21         triggerAction: 'all',
  22         emptyText:'Select a state...',
  23         selectOnFocus:true,
  24         applyTo: 'local-states'
  25     });
  26
  27     //Simple arrays can be used directly as the store config.  1-dimensional arrays
  28     //will automatically be expanded (each array item will be the combo value and text)
  29     //and for multi-dimensional arrays, the value in index 0 of each item will be assumed
  30     //to be the value, while the value at index 1 is assumed to be the text.  For example,
  31     //[['AL', 'Alabama'],['AK', 'Alaska'], etc.]. Any other values beyond index 1 within
  32     //each item will be ignored using this approach.
  33     var comboFromArray = new Ext.form.ComboBox({
  34         store: Ext.exampledata.states,
  35         typeAhead: true,
  36         forceSelection: true,
  37         triggerAction: 'all',
  38         emptyText:'Select a state...',
  39         selectOnFocus:true,
  40         applyTo: 'array-states'
  41     });
  42
  43     var comboWithTooltip = new Ext.form.ComboBox({
  44         tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
  45         store: store,
  46         displayField:'state',
  47         typeAhead: true,
  48         forceSelection: true,
  49         mode: 'local',
  50         triggerAction: 'all',
  51         emptyText:'Select a state...',
  52         selectOnFocus:true,
  53         applyTo: 'local-states-with-qtip'
  54     });
  55
  56     var converted = new Ext.form.ComboBox({
  57         typeAhead: true,
  58         triggerAction: 'all',
  59         transform:'state',
  60         width:135,
  61         forceSelection:true
  62     });
  63
  64 //  Create code view Panels. Ignore.
  65     new Ext.Panel({
  66         contentEl: 'state-combo-code',
  67         width: Ext.getBody().child('p').getWidth(),
  68         title: 'View code to create this combo',
  69         hideCollapseTool: true,
  70         titleCollapse: true,
  71         collapsible: true,
  72         collapsed: true,
  73         renderTo: 'state-combo-code-panel'
  74     });
  75     new Ext.Panel({
  76         contentEl: 'state-combo-qtip-code',
  77         autoScroll: true,
  78         width: Ext.getBody().child('p').getWidth(),
  79         title: 'View code to create this combo',
  80         hideCollapseTool: true,
  81         titleCollapse: true,
  82         collapsible: true,
  83         collapsed: true,
  84         renderTo: 'state-combo-qtip-code-panel'
  85     });
  86     new Ext.Panel({
  87         contentEl: 'array-combo-code',
  88         autoScroll: true,
  89         width: Ext.getBody().child('p').getWidth(),
  90         title: 'View code to create this combo',
  91         hideCollapseTool: true,
  92         titleCollapse: true,
  93         collapsible: true,
  94         collapsed: true,
  95         renderTo: 'array-combo-code-panel'
  96     });
  97     new Ext.Panel({
  98         contentEl: 'transformed-combo-code',
  99         autoScroll: true,
 100         width: Ext.getBody().child('p').getWidth(),
 101         title: 'View code to create this combo',
 102         hideCollapseTool: true,
 103         titleCollapse: true,
 104         collapsible: true,
 105         collapsed: true,
 106         renderTo: 'transformed-combo-code-panel'
 107     });
 108
 109 });