Loading server side data into a combobox

{
"success": true,
"users": [{
"fullName": "Joe Bloggs",
"userID": 1
}, {
"fullName": "John Smith",
"userID": 2
}]
}

1. Start by defining a model.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
type: 'string',
name: 'fullName'
}, {
type: 'int',
name: 'userID'
}]
});

2. Create an Ext.data.Store that is linked to the User model:
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
});

3. Create a form panel with a ComboBox and bind it to the store we created above:
var formPanel = Ext.create('Ext.form.Panel', {
title: 'ComboBox with server side data example',
width: 350,
autoHeight: true,
bodyPadding: 10,
items: [{
xtype: 'combobox',
fieldLabel: 'Select User',
displayField: 'fullName',
valueField: 'userID',
store: store,
queryMode: 'remote', //default behavior
forceSelection: true,
anchor: '100%'
}],
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

1. Our first step is to create an Ext.data.Store, which we will bind to our combobox
to give it its list of values. Our example will display a list of car manufacturers:
var carManufacturersStore = Ext.create('Ext.data.Store', {
fields: ['name'],
data: [{
name: 'Aston Martin'
}, {
name: 'Bentley'
}, {
name: 'Daimler'
}, {
name: 'Jaguar'
}, {
name: 'Lagonda'
}, {
name: 'Land Rover'
}, {
name: 'Lotus'
}, {
name: 'McLaren'
}, {
name: 'Morgan'
}, {
name: 'Rolls-Royce'
}]
});

2. We then create a very simple combobox bound to this store and rendered to the
document's body:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Car Manufacturer',
store: carManufacturersStore,
queryMode: 'local',
displayField: 'name',
valueField: 'name',
renderTo: Ext.getBody()
});

3. Now, we configure the combobox to find the nearest match after the user has started
typing, and set the value of the combobox's text field. We do this by adding the
typeAhead configuration option:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Car Manufacturer',
store: carManufacturersStore,
queryMode: 'local',
displayField: 'name',
valueField: 'name',
typeAhead: true,
renderTo: Ext.getBody()
});

Increasing autocomplete response time

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Car Manufacturer',
store: carManufacturers,
queryMode: 'local',
displayField: 'name',
valueField: 'name',
typeAhead: true,
typeAheadDelay: 100,
renderTo: Ext.getBody()

});

Removing the combobox's trigger button
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Car Manufacturer',
store: carManufacturers,
queryMode: 'local',
displayField: 'name',
valueField: 'name',
typeAhead: true,
typeAheadDelay: 100,
hideTrigger: true,
renderTo: Ext.getBody()
});