1. EXT JS FRAMEWORK
Sergiu-George Boboc

2. EXT JS FRAMEWORK
OVERVIEW
1. What is EXT JS?
2. UI Widgets
2.1 Panels, Forms
2.2 Menus, toolbars, buttons
2.3 Displaying Data with Grids
2.4 Editable Grids
2.5 Trees
2.6 Windows and Dialogs
2.7 Charts
3. Layouts
4. Working with Data
5. Other features
6. Resources

3. 1. What is Ext JS
E • Ext JS,is a cross-browser JavaScript library for building
X rich internet applications, using techniques such as
T AJAX, DHTML and DOM scripting
JS
• Originally built as an extension of YUI, Ext JS can now
also extend jQuery and Prototype.
F
R • In early 2006, Jack Slocum began working on a set of
A extension utilities for the Yahoo! User Interface (YUI)
M library. These extensions were quickly organized into
E an independent library of code and distributed under
W the name "yui-ext”
O • By the end of the year, the library had gained so much
R in popularity that the name was changed simply to Ext
K

4. Ext JS supports all major web browsers including:
• Internet Explorer 6+
• Firefox 3.6+ (PC, Mac)
E • Safari 3+
X
• Chrome 6+
T
JS • Opera 10.5+ (PC, Mac)
F
R Ext JS releases
A
M
E
W
O
R
K

5. Why Ext JS?
• as a client-side framework, Ext JS can run against any
server platform that can process POST requests and
E return structured data. Common choices include PHP,
X Java, .NET and many more.
T
JS
• Mature library
F
R • Extensible, object-oriented architecture
A • Good documentation and community support
M • Already adopted by important clients
E
W
O
R
K

6. Why Ext JS?
• Dual licensing model – GPL and commercial with
support
E • Feature-rich UI widgets (windows, panels, grids, forms,
X buttons, trees, toolbars, menus, etc.)
T
JS
F
R
A
M
E
W
O
R
K

7. EXT JS FRAMEWORK
2. UI Widgets
2.1 Forms
2.2 Menus, toolbars, buttons
2.3 Displaying Data with Grids
2.4 Editable Grids
2.5 Trees
2.6 Windows and Dialogs
2.7 Charts

8. 2.1 Panels, Forms
E
X
T
JS
F
R
A
M
E
W
O
R
K
Load and submit form values asynchronously

9. 2.2 Menus, toolbars, buttons
E
X
T
JS
F
R
A
M
E
W
O
R
K

10. 2.3 Displaying Data with Grids
E
X
T
JS XML FILE
<Items>
<Request>
F <IsValid>True</IsValid>
<ItemSearchRequest>
R
<Author>Sidney Sheldon</Author>
<SearchIndex>Books</SearchIndex>
</ItemSearchRequest>
A </Request>
<TotalResults>203</TotalResults>
M
<TotalPages>21</TotalPages>
<Item>
<ASIN>0446355453</ASIN>
E <DetailPageURL>
…
W </DetailPageURL>
<ItemAttributes>
O
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
R <Title>Master of the Game</Title>
</ItemAttributes>
K
</Item>
……
</Items>
http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/xml-grid.html

11. 2.3 Displaying Data with Grids
Ext.onReady(function(){
E
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
X // set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
T });
'Title', 'Manufacturer', 'ProductGroup']
JS
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
F type: 'ajax',
url: 'sheldon.xml',
R
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
A // records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
M }
totalRecords: '@total'
E
}
});
// create the grid
W var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
O {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
R
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
K renderTo:'example-grid',
width: 540,
height: 200
});
});

12. 2.3 Displaying Data with Grids
E
X
T
JS
F
R
A
M
E
W
O • Configurable features:
R paging, filtering, progress bar, sorting, cell and row editing, locking,
K searching, buffered scrolling, etc.
• Customizable data views
• Plugins

13. 2.4 Editable Grids
E
X
T
JS
F
R
A
M
E
W
O
R
K

14. 2.4 Trees
E
X
T
JS
F
R
A
M
E
W
O
R
K

15. 2.4 Windows and Dialogs
E
X
T
JS
F
R
A
M
E
W
O
R
K

16. 2.4 Windows and Dialogs
E
X
T
JS
F
R
A
M
E
W
O
R
K

17. 2.5 Charts
E
X
T
JS
F
R
A
M
E
W
O
R
K

18. EXT JS FRAMEWORK
3. Layouts
Accordion layout Anchor layout (form)
Anchor layout (panel) Column layout
Table layout HBox layout
VBox layout Border Layout
Card layout - TAB Card Layout – WHIZARD
http://dev.sencha.com/deploy/ext-4.0.2a/examples/layout-browser/layout-browser.html

19. EXT JS FRAMEWORK
4. Working with Data
 Clean separation of presentation and data.
 Thin client which connects to web services.
 Data encapsulated in JSON/XML
{ <data>
person: { <person>
name: 'Ali', <name>Ali</name>
age: 15, <age>15</age>
isCitizen: true <isCitizen>true</isCitizen>
} </person>
} </data>

20. 4. Working with Data
E
X
T
JS JSON/
XML
F Web
Backend WS
R Browser
A
M
E
W
O
R
K

21. 4. Working with Data
 Store manage data
E  Fetch from a web service, or
X  using loadData()
T  Kept as Record
JS
F JSON/XML
R WS Store Record
A
M
E
W  UI Components displays the
O data
R
K

22. 4. Working with Data
E var btn = new Ext.Button({
X text: 'Click me!',
T width: 200,
height: 100,
JS
listeners listeners: {
'click': function() {
F on() alert('Clicked!');
R handler }
A }
});
M
E btn.on('mouseover', function() {
W alert('Hovered!');
O });
R
K

23. EXT JS FRAMEWORK
5. Other features
 Themes
 Accessibility
 SVG drawing
 Drag-and-drop support
 Data-views
 Google-maps
 Resizable components
 Quick tips
 Keyboard navigation
 Templates

24. EXT JS FRAMEWORK
6. Resources
Website:
http://www.sencha.com/products/extjs/
Samples:
http://www.sencha.com/products/extjs/examples/
Documentation:
http://docs.sencha.com/ext-js/4-0/
Forum:
http://www.sencha.com/forum/
Learn:
http://www.sencha.com/learn/extjs/?4x
Screencast:
http://www.extjs.tv
http://docs.sencha.com/ext-js/4-0/#!/video