This document provides an overview of Ext JS, a JavaScript framework for building web applications. It discusses key Ext JS concepts like widgets, layouts, data packages, and the class system. Examples are provided to demonstrate how to create basic Ext JS buttons and forms.
5. 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
TEQneers GmbH & Co. KG www.teqneers.de
6. Some Ext JS experience?
Slide 6
TEQneers GmbH & Co. KG www.teqneers.de
7. Some Ext JS experience?
‣ Who has already used Javascript Frameworks?
Slide 6
TEQneers GmbH & Co. KG www.teqneers.de
8. Some Ext JS experience?
‣ Who has already used Javascript Frameworks?
‣ If so, which ones?
Slide 6
TEQneers GmbH & Co. KG www.teqneers.de
9. Some Ext JS experience?
‣ Who has already used Javascript Frameworks?
‣ If so, which ones?
‣ Who knows Ext JS?
Slide 6
TEQneers GmbH & Co. KG www.teqneers.de
10. Some Ext JS experience?
‣ Who has already used Javascript Frameworks?
‣ If so, which ones?
‣ Who knows Ext JS?
‣ Who has already worked with Ext JS?
Slide 6
TEQneers GmbH & Co. KG www.teqneers.de
11. Some Ext JS experience?
‣ Who has already used Javascript Frameworks?
‣ If so, which ones?
‣ Who knows Ext JS?
‣ Who has already worked with Ext JS?
‣ If so, which version(s)?
Slide 6
TEQneers GmbH & Co. KG www.teqneers.de
13. What are we talking about?
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
14. What are we talking about?
What is Ext JS?
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
15. What are we talking about?
What is Ext JS?
Widgets
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
16. What are we talking about?
What is Ext JS?
Widgets
Layouts
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
17. What are we talking about?
What is Ext JS?
Widgets
Layouts
Data Package
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
18. What are we talking about?
What is Ext JS?
Widgets
Layouts
Data Package
Class System
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
19. What are we talking about?
What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
20. What are we talking about?
What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
21. What are we talking about?
What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming
Slide 8
TEQneers GmbH & Co. KG www.teqneers.de
22. What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming
Slide 9
TEQneers GmbH & Co. KG www.teqneers.de
75. 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
TEQneers GmbH & Co. KG www.teqneers.de
76. 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
TEQneers GmbH & Co. KG www.teqneers.de
80. What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming
Slide 26
TEQneers GmbH & Co. KG www.teqneers.de
81. 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 specified
layout
Slide 27
TEQneers GmbH & Co. KG www.teqneers.de
82. Ext.layout.*
Slide 28
TEQneers GmbH & Co. KG www.teqneers.de
83. Examples
Slide 29
TEQneers GmbH & Co. KG www.teqneers.de
84. What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming
Slide 30
TEQneers GmbH & Co. KG www.teqneers.de
85. Overview
Slide 31
TEQneers GmbH & Co. KG www.teqneers.de
86. Overview
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
87. Overview
‣ implements Active Record pattern on the client side (sort
of)
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
88. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
89. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
‣ the underlying storage mechanism
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
90. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
‣ the underlying storage mechanism
‣ remote (AJAX, JSON-P or Ext.direct)
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
91. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
‣ the underlying storage mechanism
‣ remote (AJAX, JSON-P or Ext.direct)
‣ local (memory, local/session storage)
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
92. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
‣ the underlying storage mechanism
‣ remote (AJAX, JSON-P or Ext.direct)
‣ local (memory, local/session storage)
‣ the data format
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
93. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
‣ the underlying storage mechanism
‣ remote (AJAX, JSON-P or Ext.direct)
‣ local (memory, local/session storage)
‣ the data format
‣ JSON
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
94. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
‣ the underlying storage mechanism
‣ remote (AJAX, JSON-P or Ext.direct)
‣ local (memory, local/session storage)
‣ the data format
‣ JSON
‣ XML
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
95. Overview
‣ implements Active Record pattern on the client side (sort
of)
‣ abstracts CRUD operations regardless of
‣ the underlying storage mechanism
‣ remote (AJAX, JSON-P or Ext.direct)
‣ local (memory, local/session storage)
‣ the data format
‣ JSON
‣ XML
‣ works seamlessly with all data bound widgets
Slide 32
TEQneers GmbH & Co. KG www.teqneers.de
96. Example
Slide 33
TEQneers GmbH & Co. KG www.teqneers.de
97. What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming
Slide 34
TEQneers GmbH & Co. KG www.teqneers.de
98. A class system in
Javascript- why?
Slide 35
TEQneers GmbH & Co. KG www.teqneers.de
99. Javascript is a class-
less, prototype-based
language
Slide 36
TEQneers GmbH & Co. KG www.teqneers.de
100. Class System
Slide 37
TEQneers GmbH & Co. KG www.teqneers.de
101. Class System
‣ most developers are more familiar with class-
based languages
Slide 37
TEQneers GmbH & Co. KG www.teqneers.de
102. Class System
‣ most developers are more familiar with class-
based languages
‣ Code based on a class system is easier to handle
Slide 37
TEQneers GmbH & Co. KG www.teqneers.de
103. Class System
‣ most developers are more familiar with class-
based languages
‣ Code based on a class system is easier to handle
‣ predictable strcutures
Slide 37
TEQneers GmbH & Co. KG www.teqneers.de
104. Class System
‣ most developers are more familiar with class-
based languages
‣ Code based on a class system is easier to handle
‣ predictable strcutures
‣ easily identifiable extension points
Slide 37
TEQneers GmbH & Co. KG www.teqneers.de
105. Class System
‣ most developers are more familiar with class-
based languages
‣ Code based on a class system is easier to handle
‣ predictable strcutures
‣ easily identifiable extension points
‣ less maintenance required
Slide 37
TEQneers GmbH & Co. KG www.teqneers.de
106. 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
TEQneers GmbH & Co. KG www.teqneers.de
111. The Class Definition Pipeline
Slide 43
TEQneers GmbH & Co. KG www.teqneers.de
112. 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
TEQneers GmbH & Co. KG www.teqneers.de
113. What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming
Slide 45
TEQneers GmbH & Co. KG www.teqneers.de
114. DOM Manipulation
‣ comparable to the functionality provided by
jQuery
‣ not as sophisticated
‣ not as fast
‣ syntax not as sleek
‣ but absolutely sufficient when working inside
the widget system
Slide 46
TEQneers GmbH & Co. KG www.teqneers.de
115. Features
Slide 47
TEQneers GmbH & Co. KG www.teqneers.de
116. Features
‣ DOM manipulation
Slide 47
TEQneers GmbH & Co. KG www.teqneers.de
117. Features
‣ DOM manipulation
‣ DOM queries
Slide 47
TEQneers GmbH & Co. KG www.teqneers.de
118. Features
‣ DOM manipulation
‣ DOM queries
‣ Animations
Slide 47
TEQneers GmbH & Co. KG www.teqneers.de
121. 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
TEQneers GmbH & Co. KG www.teqneers.de
134. Drag and Drop
Slide 63
TEQneers GmbH & Co. KG www.teqneers.de
135. Drawing
Slide 64
TEQneers GmbH & Co. KG www.teqneers.de
136. Drawing
‣ renders either
‣ SVG
‣ VML (IE < 9)
Slide 65
TEQneers GmbH & Co. KG www.teqneers.de
137. Examples
Slide 66
TEQneers GmbH & Co. KG www.teqneers.de
138. Charting
Slide 67
TEQneers GmbH & Co. KG www.teqneers.de
139. Charting
Slide 68
TEQneers GmbH & Co. KG www.teqneers.de
140. 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
TEQneers GmbH & Co. KG www.teqneers.de
141. Example
Slide 70
TEQneers GmbH & Co. KG www.teqneers.de
142. What is Ext JS?
Widgets
Layouts
Data Package
Class System
DOM Manipulation
Miscellaneous
Theming
Slide 71
TEQneers GmbH & Co. KG www.teqneers.de