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