Notes

The following are the classes in the Ext JS 6 class system:

1 Ext
2 Ext.Base
3 Ext.Class
4 Ext.ClassManager
5 Ext.Loader

Ext
Ext is a global singleton object that encapsulates all classes, singletons, and utility methods in the Sencha library.
application
Many applications are initiated with Ext.application. This function loads the Ext.app.Application class and starts it with the given configuration after the page is loaded.
define
To create or override a class, you can use this function. It takes three parameters, as shown in the following code. Here, name is the name of the class, data is the properties to apply to this class, and callback is an optional function that will be called after the class is created:
Ext.define(name,data, callback)
The following code creates a class called Car:
Ext.define('Car', {
name: null,
constructor: function(name) {
if (name) {
this.name = name;
}
},
start: function() {
alert('Car started');
}
});
You can also use define to extend a class:
Ext.define('ElectricCar', {
extend: 'Car',
start: function() {
alert("Electric car started");
}
});
If you want to replace the implementation of a base class, you can use Ext.define to override the method, as shown in the following code:
Ext.define('My.ux.field.Text', {
override: 'Ext.form.field.Text',
setValue: function(val) {
this.callParent(['In override']);
return this;
}
});
If you want to create a singleton class, then you can use a property called singleton defined in Ext.Class, as shown in the following code:
Ext.define('Logger', {
singleton: true,
log: function(msg) {
console.log(msg);
}
});
onReady
This function is called once the page is loaded:
Ext.onReady(function(){
new Ext.Component({
renderTo: document.body,
html: 'DOM ready!'
});
});
In most cases, you don't have to use the onReady method in your code. Rarely, in some special cases, you may need to use it. If you're from a jQuery background, do not try to use onReady frequently as you can do the same in jQuery with $( document ).ready().
widget
When you define a class, you can give a shorthand alias. For example, the Ext. panel.Panel has an alias called widget.panel. When you define widgets, instead of specifying the alias, you can also use xtype to give a shorthand name for the class.
The xtype is very useful to specify the widgets that a container will have without creating the instance when the definition of your container gets executed. You'll learn more about this later in this chapter when you learn about containers and layouts.
Ext.widget is the shorthand to create a widget by its xtype.
For example, without using the widget method, you can create an instance of Ext.panel.Panel with the following code:
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel'
});
Instead, you can use the following shorthand to create the instance:
Ext.widget('panel', {
renderTo: Ext.getBody(),
title: 'Panel'
});
Here, the panel is a container, we'll learn more about the panel later. The below one equivalent to the above:
Ext.create('widget.panel', {
renderTo: Ext.getBody(),
title: 'Panel'
});

getClass
This returns the class of the given object if the instance is created with Ext.define; otherwise, it returns null:
var button = new Ext.Button();
Ext.getClass(button); // returns Ext.Button
getClassName
This returns the name of the class by its reference or its instance:
Ext.getClassName(Ext.Button); //returns "Ext.Button"
Ext.Base
This is the base of all Ext classes. All classes in Ext inherit from Ext.Base. All prototype and static members of this class are inherited by all other classes.
Ext.Class
This is a low-level factory that is used by Ext.ClassManager for the creation of a class. So, this shouldn't be accessed directly in your code; instead, you should use Ext.define.
Ext.ClassManager
This manages all the classes and handles mapping from a string class name to the actual class objects. It is generally accessed through these shorthands:
Ext.define
Ext.create
Ext.widget
Ext.getClass
Ext.getClassName

We have already discussed these methods in this chapter.
The DOM node event handling
You can add listeners to the DOM element, as shown here.
Let's say that in your HTML, you have a div element with id=mydiv, as shown in the following code:
<div id="mydiv"></div>
Now, to add the listener, use the following code:
var div = Ext.get('mydiv');
div.on('click', function(e, t, eOpts) {
// Do something
});


There are three ways to access DOM elements: get, query, and select.

suspendLayout
Most of the time, you don't have to call this updateLayout method in your code. However, there are some cases where you have to call it.
The updateLayout method is called during the resize and when you add or remove children. Sometimes, you may need to suspend it for a while, especially when you add/remove multiple children subsequently.
So, in these scenarios, you can set the suspendLayout property to true, and once you finish adding or removing the children, you can set suspendLayout to false and call the updateLayout method in your code.
Also, if you want to suspend the update layout for the whole framework, you can call Ext.suspendLayouts(), and after you batch update, you can resume it by calling Ext.resumeLayouts(true).
The following are the list of built-in layouts available in Ext JS:
absolute
accordion
anchor
border
card
center
column
fit
hbox
table
vbox

Ext.Button
This is a commonly used control; the handler is used for the click event, as shown in the following code:
Ext.create('Ext.Button', {
text: 'My Button',
renderTo: Ext.getBody(),
handler: function() {
alert('click');
}
});
Link button, set the href property, as shown in the following code
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
text: 'Link Button',
href: 'http://www.sencha.com/'
});
}
});

Menu Button :

Ext.create('Ext.Button', {
text: 'My Button',
renderTo: Ext.getBody(),
menu: [{
text: 'Item 1'
}, {
text: 'Item 2'
}, {
text: 'Item 3'
}]
});


Ext.Message Example:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Button', {
text: 'My Button',
renderTo: Ext.getBody(),
handler: function() {
Ext.MessageBox.show({
title: 'Save Changes?',
msg: 'Do you want to save the file?',
buttons: Ext.MessageBox.YESNO,
fn: function(button) {
if ('yes' == button) {

} else if ('no' == button) {

}
},
icon: Ext.MessageBox.QUESTION
});
}
});
}
});

Fields
Ext JS comes with so many built-in ready to use form fields. Some of the commonly used fields are:
Ext.form.field.Checkbox
Ext.form.field.ComboBox
Ext.form.field.Date
Ext.form.field.File
Ext.form.field.Hidden
Ext.form.field.HtmlEditor
Ext.form.field.Number
Ext.form.field.Radio
Ext.form.field.Text
Ext.form.field.TextArea
Ext.form.field.Time
You can remove spinner buttons, arrow keys, and mouse wheel listeners with the config options: hideTrigger, keyNavEnabled, and mouseWheelEnabled respectively.


Ext.form.field.Number
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.field.Number', {
renderTo: Ext.getBody(),
name: 'Counter',
fieldLabel: 'Counterrrrrr',
value: 0,
step:0.1,
maxValue: 10,
minValue: 0
});
}
});

ComboBox with Values:

Ext.application({
name: 'Fiddle',
launch: function() {
var months = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "JAN",
"name": "January"
}, {
"abbr": "FEB",
"name": "February"
}, {
"abbr": "MAR",
"name": "March"
}, {
"abbr": "APR",
"name": "April"
}, {
"abbr": "MAY",
"name": "May"
}, {
"abbr": "JUN",
"name": "June"
}, {
"abbr": "JUL",
"name": "July"
}, {
"abbr": "AUG",
"name": "August"
}, {
"abbr": "SEP",
"name": "September"
}, {
"abbr": "OCT",
"name": "October"
}, {
"abbr": "NOV",
"name": "November"
}, {
"abbr": "DEC",
"name": "December"
}]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Month',
store: months,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
}
});






Ext.form.field.HtmlEditor
Ext.application({
name: 'Fiddle',
launch: function() {

Ext.create('Ext.form.HtmlEditor', {
width: 800,
height: 200,
renderTo: Ext.getBody()
});
}
});
Events in the form panel
Some of the supported events in the form panel are:

beforeaction: This event will be fired before executing any action
actionfailed: This event will be fired when an action fails
actioncomplete: This event will be fired after an action is completed
validitychange: This event will be fired when the validity of the entire form changes
dirtychange: This event will be fired when the dirty state of the form changes

Ext.form.CheckboxGroup
CheckboxGroup extends FieldContainer and is used to group the checkbox field
Ext.application({
name: 'Fiddle',
launch: function() {

Ext.create('Ext.form.CheckboxGroup', {
renderTo: Ext.getBody(),
fieldLabel: 'Skills ',
vertical: true,
columns: 1,
items: [{
boxLabel: 'C++',
name: 'rb',
inputValue: '1'
}, {
boxLabel: '.Net Framework',
name: 'rb',
inputValue: '2',
checked: true
}, {
boxLabel: 'C#',
name: 'rb',
inputValue: '3'
}, {
boxLabel: 'SQL Server',
name: 'rb',
inputValue: '4'
}, ]
});
}
});
Ext.form.FieldContainer
FieldContainer is useful when you want to group a set of related field and attach it to a single label.




Ext.application({
name: 'Fiddle',
launch: function() {

Ext.create('Ext.form.FieldContainer', {
renderTo: Ext.getBody(),
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaultType: 'textfield',
defaults: {
hideLabel: 'true'
},
items: [{
name: 'firstName',
fieldLabel: 'First Name',
flex: 2,
emptyText: 'First',
allowBlank: false
}, {
name: 'lastName',
fieldLabel: 'Last Name',
flex: 3,
margin: '0 0 0 6',
emptyText: 'Last',
allowBlank: false
}]
});
}
});
Ext.form.RadioGroup
RadioGroup extends CheckboxGroup and is used to group radio buttons.
Ext.application({
name: 'Fiddle',
launch: function() {

Ext.create('Ext.form.RadioGroup', {
renderTo: Ext.getBody(),
fieldLabel: 'Sex ',
vertical: true,
columns: 1,
items: [{
boxLabel: 'Male',
name: 'rb',
inputValue: '1'
}, {
boxLabel: 'Female',
name: 'rb',
inputValue: '2'
}]
});
}
});

Submitting a form
To submit a form, you can use the submit method of the form. Use the getForm method to get the form and isValid to validate the form before submitting it, as shown in the following code:
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'someurl',
success: function () {
},
failure: function () {
}
});
} else {
Ext.Msg.alert('Error', 'Fix the errors in the form')
}

Menus and toolbar
Ext JS provides complete support to build any kind of toolbar and menus you can think of. Use Ext.toolbar.Toolbar to build a toolbar. By default, any child items in Ext.toolbar.Toolbar is a button, but you can add any other controls, such as a text field, a number field, an icon, a dropdown, and so on in the toolbar.
To arrange items in the toolbar, you can use Ext.toolbar.Spacer, Ext.toolbar. Separator, and Ext.toolbar.Fill to have space, a separator bar, and a right-justified button container respectively. The shortcuts for these are, ' ' (space), '|' (pipe), and '->' (arrow), respectively.

Ext.application({
name: 'Fiddle',
launch: function() {

Ext.create('Ext.toolbar.Toolbar', {
renderTo: Ext.getBody(),
width: 900,
items: [{
text: 'My Button'
}, {
text: 'My Button',
menu: [{
text: 'Item 1'
}, {
text: 'Item 2'
}, {
text: 'Item 3'
}]
}, {
text: 'Menu with divider',
tooltip: {
text: 'Tooltip info',
title: 'Tip Title'
},
menu: {
items: [{
text: 'Task 1',
// handler: onItemClick
}, '-', {
text: 'Task 2',
// handler: onItemClick
}, {
text: 'Task 3',
// handler: onItemClick
}]
}
}, '->', {
xtype: 'textfield',
name: 'field1',
emptyText: 'search web site'
}, '-', 'Some Info', {
xtype: 'tbspacer'
}, {
name: 'Count',
xtype: 'numberfield',
value: 0,
maxValue: 10,
minValue: 0,
width: 60
}]
});
}
});

The customer feedback form design