Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / form / combos.js
1 /*!
2  * Ext JS Library 3.0.0
3  * Copyright(c) 2006-2009 Ext JS, LLC
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 });