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