Rich editing with an HTML field

1. Initialize the QuickTipManager:
Ext.tip.QuickTipManager.init();

2. Create a narrow form panel and add an HtmlEditor field to the panel's
items collection:
var formPanelNarrow = Ext.create('Ext.form.Panel', {
title: 'HTML Editor (narrow)',
width: 350,
height: 200,
layout: 'fit',
items: [{
xtype: 'htmleditor'
}],
renderTo: Ext.getBody()
});

3. Create a second form panel with the HtmlEditor but this time set the width
to 600:
var formPanelWide = Ext.create('Ext.form.Panel', {
title: 'HTML Editor (wide)',
width: 600,
height: 200,
layout: 'fit',
items: [{
xtype: 'htmleditor'
}],
renderTo: Ext.getBody()
});
4. Create a third form panel with an HTML editor but customize the toolbar options
as follows:
var formPanelCustomOptions = Ext.create('Ext.form.Panel', {
title: 'HTML Editor (customising the toolbar)',
width: 600,
height: 200,
layout: 'fit',
items: [{
xtype: 'htmleditor',
enableSourceEdit: false,
enableColors: false,
enableLinks: false,
fontFamilies: ["Arial", "Tahoma", "Verdana"]
}],
renderTo: Ext.getBody()
});

Rendering the results in a combobox

1. Define an Issue Model:
Ext.define('Issue', {
extend: 'Ext.data.Model',
fields: ['id', 'raisedBy', 'title', 'body', 'status']
});

2. Create a store and add some data for local loading:
var store = Ext.create('Ext.data.Store', {
model: 'Issue',
data: [{
id: 1,
raisedBy: 'Joe',
title: 'Registration Form Not Emailing User',
body: 'The registration email is not being sent to users
upon regisration.',
status: 'Open'
}, {
id: 2,
raisedBy: 'John',
title: 'Account Details Loading Issue',
body: 'The account details page is not loading data from
the server.',
status: 'Closed'
}, {
id: 3,
raisedBy: 'Fred',
title: 'Account Details Missing Email Field',
body: 'The account details page is missing a field to
allow the user to update their email address.',
status: 'Open'
}]
});

3. Add the combobox to a form panel and customize the combo's list through Ext.
view.BoundList (accessible through the listConfig config option):
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Custom ComboBox Results',
width: 500,
autoHeight: true,
bodyPadding: 10,
items: [{
xtype: 'combobox',
fieldLabel: 'Select Issue',
displayField: 'title',
store: store,
queryMode: 'local',
anchor: '100%',
listConfig: {
getInnerTpl: function(){
return '

{title} ({status})

' +
'

Reported by

{raisedBy}
' +'{body}';
}
}
}],
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

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()
});

Sliding values using a Slider field

1. We start by instantiating the Ext.slider.Single class, a subclass of
Ext.slider.Multi, and giving it a width, a label, and rendering it to the
body of our document:
Ext.create('Ext.slider.Single', {
fieldLabel: 'Maximum Price',
width: 400,
renderTo: Ext.getBody()
});

2. We now provide the field with a default value and some constraints as to what
value can be chosen. This is done by using the value, minValue, and maxValue
configuration options respectively:
Ext.create('Ext.slider.Single', {
fieldLabel: 'Maximum Price',
value: 100,
minValue: 0,
maxValue: 500,
width: 400,
renderTo: Ext.getBody()
});

3. Finally, we restrict the user even further by configuring an increment value that
specifies by how much the slider's value changes as the thumb is dragged:
Ext.create('Ext.slider.Single', {
fieldLabel: 'Maximum Price',
value: 100,
minValue: 0,
maxValue: 500,
increment: 10,
width: 400,
renderTo: Ext.getBody()
});

Entering numbers with a Spinner field

1. Create a form panel:
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Spinner Field Example',
width: 350,
height: 100,
bodyPadding: 10,
defaults: {
labelWidth: 150
},
items: [],
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

2. Add a number field to the form panel's items collection:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'numberfield',
fieldLabel: 'Card Expiry Date',
minValue: 2011,
maxValue: 2020
}],
...
});

3. Create a second number field and customize it with extra configuration:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'numberfield',
fieldLabel: 'Card Expiry Date',
minValue: 2011,
maxValue: 2020
}, {
xtype: 'numberfield',
fieldLabel: 'Weight (KG)',
minValue: -100,
maxValue: 100,
allowDecimals: true, //Default behaviour
decimalPrecision: 1,
step: 0.5
}],
...
});

var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'numberfield',
fieldLabel: 'Card Expiry Date',
minValue: 2011,
maxValue: 2020,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
}],
...
});

Loading and parsing Dates into a Date field

1. We start by creating a simple Date Picker:
var dateField = Ext.create('Ext.form.field.Date', {
fieldLabel: 'Pick a Date',
renderTo: Ext.getBody()
});
2. Now we can use the Date Picker's setValue method to give it a value. We will use
British date formatting in this example with our date formatted as dd/mm/yyyy.
dateField.setValue('31/01/2011');
3. After running this code we see that the field doesn't understand the format and so
does not display or select a value.
4. To solve this problem we can specify the format that the date picker expects the
values being passed to the setValue method are in. We do this by using the
format configuration option.
var dateField = Ext.create('Ext.form.field.Date', {
fieldLabel: 'Pick a Date',
renderTo: Ext.getBody(),
format: 'd/m/Y'
});
dateField.setValue('31/01/2011');
5. When we run this code we see that our date field contains the correct value.

Setting up available date ranges in Date fields

1. First of all we create a very simple Date field and render it to the document's body.
Ext.create('Ext.form.field.Date', {
fieldLabel: 'Pick a Date',
value: new Date(2011, 7, 8),
renderTo: Ext.getBody()
});

2. We can now introduce the minValue and maxValue configuration options to restrict
the available dates.
Ext.create('Ext.form.field.Date', {
fieldLabel: 'Pick a Date',
minValue: new Date(2011, 7, 5),
maxValue: new Date(2011, 7, 17),
renderTo: Ext.getBody()
});

Disabling specific dates

Ext.create('Ext.form.field.Date', {
fieldLabel: 'Pick a Date',
format: 'd/m/Y',
disabledDates: ['08/08/2011', '10/08/2011', '12/08/2011'],
renderTo: Ext.getBody()
});