examples/form/combos.js

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