ExtJS is one of the best client-side JavaScript widget frameworks which come with hundreds of build-in components and it’s also very easy to extend or customized those components. One of the most useful components is ComboBox. We can use combobox to populate groups of items on it, select one or multiple items and can associate store with it to populate it remotely.
Today I am going to show you how to customized ExtJS combo box to looks like and behave like a auto-complete textfield. We will use ArrayStore to store the companies name and ids and on entering character in ComboBox will show a list of companies sorted with that character.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
Ext.onReady(function () {
var store = Ext.create(‘Ext.data.ArrayStore’, {
fields: [
{name: ‘id’},
{name: ‘company’}
],
data : [
[1,‘Ali Baba’],
[2,‘Alcoa Inc’],
[3,‘Altria Group Inc’],
[4,‘American Express Company’],
[5,‘American International Group, Inc.’],
[6, ‘AT&T Inc.’],
[7, ‘Boeing Co.’],
[8, ‘Caterpillar Inc.’],
[9, ‘Citigroup, Inc.’],
[10, ‘E.I. du Pont de Nemours and Company’],
[11, ‘Exxon Mobil Corp’],
[12, ‘General Electric Company’],
[13, ‘General Motors Corporation’],
[14, ‘Hewlett-Packard Co.’],
[15, ‘Honeywell Intl Inc’],
[16, ‘Intel Corporation’],
[17, ‘International Business Machines’],
[18, ‘Johnson & Johnson’],
[19, ‘JP Morgan & Chase & Co’],
[20, ‘McDonald\’s Corporation’],
[21, ‘Merck & Co., Inc.’],
[22, ‘Microsoft Corporation’],
[23, ‘Pfizer Inc’],
[24, ‘The Coca-Cola Company’],
[25, ‘The Home Depot, Inc.’],
[26, ‘The Procter & Gamble Company’],
[27, ‘United Technologies Corporation’],
[28, ‘Verizon Communications’],
[29, ‘Wal-Mart Stores, Inc.’],
[30, ‘Walt Disney Company (The) (Holding Company)’]
]
});
Ext.create(‘Ext.form.Panel’, {
width: 400,
frame: true,
title: ‘ExtJS Auto Complete ComboBox’,
padding: 10,
fieldDefaults: {
msgTarget : ‘side’,
labelWidth: 100
},
defaultType: ‘textfield’,
defaults: {
anchor: ‘100%’
},
items: [{
xtype : ‘displayfield’,
value : ‘Type first two characters of your company to select it.’
},{
fieldLabel: ‘Company Name’,
xtype : ‘combobox’,
emptyText : ‘Company Name’,
typeAhead : true,
minChars : 2,
store : store,
valueField : ‘id’,
triggerAction : ‘query’,
hideTrigger : true,
displayField : ‘company’
}],
dockedItems: [{
xtype: ‘toolbar’,
dock: ‘bottom’,
ui: ‘footer’,
items: [{
xtype: ‘tbfill’
},{
text: ‘Cancel’
},{
text: ‘Submit Form’
}]
}],
renderTo: ‘output’
});
});
|
Output:
Enter first two characters of your company and you will see following output.
Happy Coding 🙂
Source techzoo.org
