Introduction to Ext JS 4

TEQneers GmbH & Co. KG www.teqneers.de

Who?

‣ Stefan Gehrig
‣ @sgehrig
‣ gehrig@teqneers.de
‣ TEQneers GmbH & Co. KG, Stuttgart
‣ Software Architect, Senior Developer PHP &
Javascript

Slide 2


Products
‣ Ext JS 4.1 ‣ Sencha.io

‣ Ext JS 3.4 ‣ Ext Core

‣ Sencha GXT 3 ‣ Sencha SDK Tools

‣ Sencha Touch 2 ‣ JSBuilder

‣ Sencha Touch Charts

‣ Sencha Architect 2

‣ Sencha Animator

Slide 4


History
‣ 01/2006 Jack Slocum developed an extension for YUI
called yui-ext
‣ 06/2006 Ext JS 1.1 with adapters for YUI, jQuery or
Prototype
‣ 04/2008 Ext JS 2.0 (dual license GPLv3 + commercial)
‣ 07/2009 Ext JS 3.0
‣ 06/2010 Raphaël + jQTouch + theJIT + Ext JS = Sencha
‣ 05/2011 Sencha Touch 1.0 and Ext JS 4.0
‣ 04/2012 Ext JS 4.1
‣ 06/2012 Sencha Touch 2.0

Slide 5


Some Ext JS experience?

Slide 6



‣ Who has already used Javascript Frameworks?

Slide 6



‣ If so, which ones?

Slide 6



‣ Who knows Ext JS?

Slide 6



‣ Who has already worked with Ext JS?

Slide 6



‣ Who has already worked with Ext JS?
‣ If so, which version(s)?

Slide 6


Ext JS 4.0/4.1

Slide 7


What are we talking about?

Slide 8


What is Ext JS?

Slide 8


What is Ext JS?
Widgets

Slide 8


What is Ext JS?
Widgets
Layouts

Slide 8


What is Ext JS?
Widgets
Layouts
Data Package

Slide 8


What is Ext JS?
Widgets
Layouts
Data Package
Class System

Slide 8


What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation

Slide 8


What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous

Slide 8


What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming

Slide 8


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 9


„Full-Stack“-
Javascript-Framework

Slide 10


„Full-Stack“-Javascript-Framework

Slide 11


‣ Huge widget library

Slide 11



‣ MVC application
oriented code

Slide 11



‣ MVC application
oriented code

‣ Layouts

Slide 11



‣ MVC application
oriented code

‣ Layouts

‣ Data package

Slide 11



‣ MVC application
oriented code

‣ Layouts

‣ Data package

‣ Class system

Slide 11



‣ MVC application
oriented code

‣ Layouts

‣ Data package

‣ Class system

‣ DOM manipulation

Slide 11



‣ MVC application
oriented code

‣ Layouts

‣ Data package

‣ Class system


‣ Templating
Slide 11


‣ Huge widget library ‣ Drawing / charting

‣ MVC application
oriented code

‣ Layouts

‣ Data package

‣ Class system


‣ Templating
Slide 11



‣ MVC application ‣ AJAX
oriented code (XMLHttpRequest)

‣ Layouts

‣ Data package

‣ Class system


‣ Templating
Slide 11




‣ Layouts ‣ Utilities

‣ Data package

‣ Class system


‣ Templating
Slide 11





‣ Data package ‣ Well documented API,
clean code
‣ Class system


‣ Templating
Slide 11





‣ Data package ‣ Well documented API,
clean code
‣ Class system
‣ Re-usable code,
‣ DOM manipulation excellent cross-
browser compatibility
‣ Templating
Slide 11


Structure

Slide 12


Structure

Slide 13


Structure

Slide 14


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 15


Ext.button.Button

Slide 16


Ext.button.Button
Ext.create('Ext.Button', {
! text: 'Click me',
! renderTo: Ext.getBody(),
! handler: function() {
! ! alert('You clicked the button!');
! }
});

Slide 16


Ext.button.Button
! text: 'Click me',
! }
});

renderTo: Ext.getBody(),
text: 'Click Me',
enableToggle: true
});

Slide 16


Ext.button.Button
! text: 'Click me',
! }
});

renderTo: Ext.getBody(),
text: 'Click Me',
enableToggle: true
});

text : 'Menu button',
renderTo : Ext.getBody(),
menu : [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'}
]
});

Slide 16


Ext.form.Panel / Ext.form.*

Slide 17


Ext.form.Panel / Ext.form.*
Ext.create('Ext.form.Panel', {
! frame: true,
! title: 'Form Fields',
! width: 340,
! bodyPadding: 5,

! fieldDefaults: {
! ! labelAlign: 'left',
! ! labelWidth: 90,
! ! anchor: '100%'
! },

! items: [{
! ! xtype: 'textfield',
! ! name: 'textfield1',
! ! fieldLabel: 'Text field',
! ! value: 'Text field value'
! }, {
! ! xtype: 'textfield',
! ! name: 'password1',
! ! inputType: 'password',
! ! fieldLabel: 'Password field'
! }, {
! ! xtype: 'filefield',
! ! name: 'file1',
! ! fieldLabel: 'File upload'
! }, {
! ! xtype: 'textareafield',
! ! name: 'textarea1',
! ! fieldLabel: 'TextArea',
! ! value: 'Textarea value'
! }, ...]
});

Slide 17


Ext.grid.Panel

Slide 18


Ext.grid.Panel
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

Slide 18


Ext.panel.Panel

Slide 19


Ext.panel.Panel
Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
});

Slide 19


Ext.slider.*

Slide 20


Ext.slider.*
Ext.create('Ext.slider.Single', {
width: 200,
value: 50,
increment: 10,
minValue: 0,
maxValue: 100,
});

Slide 20


Ext.slider.*
Ext.create('Ext.slider.Single', {
width: 200,
value: 50,
increment: 10,
minValue: 0,
maxValue: 100,
});

Ext.create('Ext.slider.Multi', {
width: 200,
values: [25, 50, 75],
increment: 5,
minValue: 0,
maxValue: 100,
constrainThumbs: false,
});

Slide 20


Ext.slider.*
Ext.create('Ext.slider.Single', { Ext.create('Ext.slider.Single', {
width: 200, width: 214,
value: 50, minValue: 0,
increment: 10, maxValue: 100,
minValue: 0, useTips: true,
maxValue: 100, tipText: function(thumb){
renderTo: Ext.getBody() return Ext.String.format('**{0}% complete**', thumb.value);
}); },
});

Ext.create('Ext.slider.Multi', {
width: 200,
values: [25, 50, 75],
increment: 5,
minValue: 0,
maxValue: 100,
constrainThumbs: false,
});

Slide 20


Ext.tab.Panel

Slide 21


Ext.tab.Panel
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});

Slide 21


Ext.toolbar.Toolbar

Slide 22


Ext.toolbar.Toolbar
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
items: [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
'-',
'text 1',
{ xtype: 'tbspacer' },
'text 2',
{ xtype: 'tbspacer', width: 50 },
'text 3'
]
});

Slide 22


Ext.tree.Panel

Slide 23


Ext.tree.Panel
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
});

Slide 23


Ext.window.MessageBox

Slide 24


Ext.window.MessageBox

Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your
changes?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
});

Slide 24


Ext.window.Window

Slide 25


Ext.window.Window

Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {})
}
}).show();

Slide 25


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 26


Layouts

‣ Ext JS applications are build
on components

‣ Containers are specialized
components that contain
other components (or
containers)

‣ Sizing and positioning of a
containers‘ children is
determined by the speciﬁed
layout

Slide 27


Ext.layout.*

Slide 28


Examples

Slide 29


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 30


Overview

Slide 31


Overview

Slide 32


Overview
‣ implements Active Record pattern on the client side (sort
of)

Slide 32


Overview
of)
‣ abstracts CRUD operations regardless of

Slide 32


Overview
of)
‣ the underlying storage mechanism

Slide 32


Overview
of)
‣ remote (AJAX, JSON-P or Ext.direct)

Slide 32


Overview
of)
‣ local (memory, local/session storage)

Slide 32


Overview
of)
‣ the data format

Slide 32


Overview
of)
‣ the data format
‣ JSON

Slide 32


Overview
of)
‣ the data format
‣ JSON
‣ XML

Slide 32


Overview
of)
‣ the data format
‣ JSON
‣ XML
‣ works seamlessly with all data bound widgets

Slide 32


Example

Slide 33


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 34


A class system in
Javascript- why?

Slide 35


Javascript is a class-
less, prototype-based
language

Slide 36


Class System

Slide 37


Class System

‣ most developers are more familiar with class-
based languages

Slide 37


Class System

based languages
‣ Code based on a class system is easier to handle

Slide 37


Class System

based languages
‣ predictable strcutures

Slide 37


Class System

based languages
‣ easily identiﬁable extension points

Slide 37


Class System

based languages
‣ easily identiﬁable extension points
‣ less maintenance required

Slide 37


Example
Ext.define('My.sample.Person', {
name: 'Unknown',

constructor: function(name) {
if (name) {
this.name = name;
}
},

eat: function(foodType) {
console.log(this.name + " is eating: " + foodType);
}
});
Ext.define('My.sample.Tattletale', {
! extend: 'My.sample.Person',

say: function(something) {
console.log(this.name + " says: " + something);
}
});

var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat("Salad");
var maria = Ext.create('My.sample.Tattletale', 'Maria');
maria.eat("Sausage");
maria.say("Bla bla blub");

Slide 38


Statics
Ext.define('Computer', {
statics: {
instanceCount: 0,
factory: function(brand) {
return new this(brand);
}
},

! brand: null,

constructor: function(brand) {
this.brand! = brand;
this.self.instanceCount ++;
}
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');

alert(appleComputer.brand);

alert(Computer.instanceCount);

Slide 39


Conﬁg
Ext.define('MyClass', {

config: {
title: 'Default Title'
},

applyTitle: function(newTitle) {
if (!Ext.isString(newTitle) || newTitle.length === 0) {
throw 'Error: Title must be a valid non-empty string';
}
else {
return newTitle;
}
}

! /*
! getTitle: function() {
return this.title;
},

setTitle: function(newTitle) {
this.title! = this.applyTitle(newTitle);
}
! */
});

Slide 40


Mixins

Slide 41


Singleton

Ext.define('Logger', {
singleton: true,
log: function(msg) {
console.log(msg);
}
});

Logger.log('Hello');

Slide 42


The Class Deﬁnition Pipeline

Slide 43


Summary

‣ Class system combines classic and well-known
methodologies with the dynamic nature of
Javascript
‣ When sticking to the naming convention
(compare to PSR-0 in PHP) Ext JS provides
dynamic code loading (auto-loading)
‣ Class system is the foundation of the whole
framework (more than 300 shipped classes)

Slide 44


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 45


DOM Manipulation

‣ comparable to the functionality provided by
jQuery
‣ not as sophisticated
‣ not as fast
‣ syntax not as sleek
‣ but absolutely sufﬁcient when working inside
the widget system

Slide 46


Features

Slide 47


Features


Slide 47


Features

‣ DOM queries

Slide 47


Features

‣ DOM queries
‣ Animations

Slide 47


Ext.dom.Helper

var dh = Ext.DomHelper; // create shorthand alias
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
children: [
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
var list = dh.append(
Ext.getBody(),
spec
);

dh.append(list, [
{tag: 'li', id: 'item4', html: 'List Item 4'}
]);

Slide 48


Ext.dom.Helper - Templating

var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';

var tpl = Ext.DomHelper.createTemplate(html);
tpl.append(Ext.getBody(), {
id: 'link1',
url: 'http://www.edspencer.net/',
text: "Ed's Site"
});
tpl.append(Ext.getBody(), {
id: 'link2',
url: 'http://www.dustindiaz.com/',
text: "Dustin's Site"
});

Slide 49


Ext.dom.Query

‣ provides selector and XPath processing
‣ extendable with custom pseudo classes and
matchers
‣ works on HTML and XML
‣ supports most of the CSS3 selectors spec and
basic XPath

Slide 50


Animations

var myComponent = Ext.create('Ext.Component', {
renderTo: document.body,
width: 200,
height: 200,
style: 'border: 1px solid red;'
});

Ext.create('Ext.fx.Anim', {
target: myComponent,
duration: 1000,
from: {
width: 400
},
to: {
width: 300,
height: 300
}
});

Slide 51


Keyframes

Ext.create('Ext.fx.Animator', {
target: Ext.getBody().createChild({
style: {
width: '100px',
height: '100px',
'background-color': 'red'
}
}),
duration: 10000, // 10 seconds
keyframes: {
0: { opacity: 1, backgroundColor: 'FF0000' },
20: { x: 30, opacity: 0.5 },
40: { x: 130, backgroundColor: '0000FF' },
60: { y: 80, opacity: 0.3 },
80: { width: 200, y: 200 },
100: { opacity: 1, backgroundColor: '00FF00' }
}
});

Slide 52


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 53


Utilities

Slide 54


Tools
‣ Ext.Array ‣ Ext.util.TextMetrics
‣ Ext.Number ‣ Collections
‣ Ext.Object ‣ HashMaps
‣ Ext.String ‣ Events & Tasks
‣ Ext.JSON
‣ Ext.Date
‣ Ext.Function
‣ Ext.util.Format

Slide 55


Templating

Slide 56


Templating
var order!= ...,
! template = new Ext.XTemplate(
'<table class="order">',
! '<tbody>',
! '<tpl for=".">',
! ! '<tpl for="OrderDetails">',
! ! ! '<tr class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
! ! ! ! '<tpl if="xindex == 1">',
! ! ! ! ! '<th rowspan="{[xcount]}">{parent.Order.Id}</th>',
! ! ! ! '</tpl>',
! ! ! ! '<td>{#}.</td>',
! ! ! ! '<td>Product ID <b>{ProductId}</b></td>',
! ! ! ! '<td><tpl if="UnitPrice > 15"><u>{UnitPrice:usMoney}</u></tpl><tpl
if="UnitPrice <= 15">{UnitPrice:usMoney}</tpl></td>',
! ! ! ! '<td>{Quantity * 0.5}</td>',
! ! ! '</tpl>',
! ! '</tr>',
! '</tpl>',
! '</tbody>',
'</table>'
);

// apply the CustomerOrders array to the template
template.append('content', order.CustomerOrders);

Slide 57


Example

Slide 58


AJAX

Slide 59


Simple XMLHttpRequest

Ext.Ajax.request({
url: 'some_page.php',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.log(obj);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});

Slide 60


Can even fake ﬁle uploads...

Ext.Ajax.request({
url: 'upload.php',
! form: 'id_of_a_form_with_an_upload_element',
! isUpload: true,
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.dir(obj);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});

Slide 61


Keyboard
Navgation

Slide 62


Drag and Drop

Slide 63


Drawing

Slide 64


Drawing

‣ renders either
‣ SVG
‣ VML (IE < 9)

Slide 65


Examples

Slide 66


Charting

Slide 67


Charting

Slide 68


Charting

‣ relatively simple charting solution out of the box
‣ but: lacks a lot of features when compared to
professional enterprise-grade solutions such as
Highcharts JS for example

Slide 69


Example

Slide 70


What is Ext JS?

Widgets

Layouts

Data Package

Class System

DOM Manipulation

Miscellaneous

Theming

Slide 71


Theming
‣ uses SASS and Compass as CSS pre-processor
‣ component UIs allow for easy extension / styling

@include extjs-panel-ui( Ext.create('widget.panel', {
'bubble', ui: 'bubble',
width: 300,
$ui-header-font-size: 12px, height: 300,
$ui-header-font-weight: bold, title: 'Panel with a bubble UI!'
$ui-header-color: #0D2A59, });
$ui-header-background-color: #fff,
$ui-header-background-gradient: null,

$ui-border-color: #fff,
$ui-border-radius: 4px,
$ui-body-background-color: #fff,
$ui-body-font-size: 14px
);

Slide 72


Questions?

Slide 73


Thank you, come
again!

Slide 74


Links
‣ http://www.sencha.com/
‣ http://www.sencha.com/products/extjs/
‣ http://docs.sencha.com/ext-js/4-1/
‣ Ext JS 4.1
‣ http://www.sencha.com/blog/ﬁrst-thoughts-on-ext-js/
‣ http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications/
‣ Class System
‣ http://www.sencha.com/learn/sencha-class-system/
‣ http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system
‣ http://edspencer.net/2011/01/classes-in-ext-js-4-under-the-hood.html
‣ http://edspencer.net/2011/01/ext-js-4-the-class-deﬁnition-pipeline.html
‣ Data Package
‣ http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/
‣ http://www.sencha.com/blog/ext-js-4-anatomy-of-a-model/
‣ http://edspencer.net/2011/02/proxies-extjs-4.html
‣ Templating
‣ http://sgehrig.github.com/Ext-Templating-Examples/

Slide 75


Introduction to Ext JS 4

More Related Content

Viewers also liked

Similar to Introduction to Ext JS 4

Recently uploaded

Introduction to Ext JS 4

Editor's Notes