Das Dokument bietet eine Einführung in Ext JS 4, ein HTML5-Framework zur Erstellung webbasierter Anwendungen, und hebt die Geschichte und den architektonischen Aufbau des Frameworks hervor. Es werden zentrale Konzepte wie das Klassensystem, Komponenten, Modelle, Stores und das MVC-Architekturmuster behandelt. Zusätzlich werden Beispiele für die Anwendung dieser Konzepte in der Programmierung gegeben.

1. Einführung in Ext JS 4

2. Thorsten Suckow-Homberg, Jahrgang 1976
PHP & Javascript seit 1999
Sencha seit 2007
Autor des conjoon Open Source Projektes (conjoon.org)
arbeitet für die eyeworkers interactive GmbH, Karlsruhe
( jobs.eyeworkers.de )
@thorstensuckow

3. Worum geht es hier?
Ext JS4 – HTML 5 Framework zur Erstellung webbasierter Applikationen
Geschichtlicher Überblick und Einblicke in
das Framework
Sencha als Unternehmen
Architektur, Klassensystem, Komponenten

4. Sencha
Jack Slocum programmiert ExtJS auf Basis von YUI, um
eine erweiterte Sammlung von UI Controls anzubieten
Ende 2007: ExtJS2 – Meilenstein!
2011: Sench Touch
2011: ExtJS4
heute: Investment Capital, vlt. das populärste JS
Framework: > 5000 Kunden, > 300.000 aktive community
member, > 100 Mitarbeiter
mehr als 1.6 Millionen Entwickler

6. Features
Charting
MVC
Powerful Grids
Theming
Component Query
Sandboxing
Verbessertes Klassensystem

9. SCREENSHOT SCIRCLES http://s-circles.com

11. Klassensystem

12. Klassensystem - Einführung
Sencha arbeitet mit einem eigenen System, um OOP
in JS abzubilden
Verwendet unter der Haube natürlich weiterhin die
Stärken des Prototyping
Overrides, Mixins
new fällt weg, dafür Ext.create()
Klassendefinition über Ext.define()

13. Klassensystem - Einführung
var user = Ext.create('User');
var user = new User();

14. Klassensystem - Einführung
var user = Ext.create('User');
var user = new User();
var user = new User('Mustermann', 'Max');
var user = Ext.create('User', {
firstname : 'Max',
lastname
});
: 'Mustermann'

15. Klassensystem - Vererbung
Ext.define('User.Customer', {
extend : 'User',
street
: '',
city
User
: '',
zipCode : ''
});
Customer

16. Klassensystem - Mixins
Mixins erlauben es, Funktionalität anderer Klassen in
eine andere zu „streuen“
„Traits“ in PHP
Nur Verhalten wird kopiert, nicht aber der Typ!
Ext.define('Prism', {
Ext.define('Internet', {
mixins : {
stayAnonymous : 'Prism'
spy : function() {
alert(„I'm watching you“);
},
}
invisible : function() {
this.mixins.stayAnonymous.spy.call(this)
});
}
});

17. Komponenten

18. Komponenten

19. Komponenten – Component
Controls in ExtJS sind „Komponenten“ Ext.Component
Eigenschaften:
show/hide
enable/disable
xtype
child components via Ext.Container
observable!

20. Komponenten – Component > Container
Container - lateinisch continere ‚zusammenhalten',
‚enthalten'
Ext.Container - Basisklasse für alle Komponenten, die
andere Komponenten aufnehmen können
Toolbars
Panels
Fieldsets
Container verwalten ihre Kindelemente über Layouts

21. Komponenten – Component > Container (Layouts)
Wichtigsten:
hbox
vbox
card
fit

22. Komponenten – Component > Container (Layouts)
Zum Beispiel:
Quelle: http://www.sencha.com/docs/

23. Komponenten – Component > Container > Panel
in ExtJS Container für verschiedene funktionelle
Aufgaben:
TabPanel
TreePanel
GridPanel
...

24. Ext.create('Ext.tab.Panel', {
width: 400,
height: 200,
renderTo: document.body,
items: [{
title: 'Tab 1'
}, {
title: 'Tab 2'
}, {
title: 'Tab 3'
}]
});
defaultType

25. Komponenten – Component > Container > Toolbar
Container zur Aufnahme von Steuer- oder
Eingabeelementen
Toolbars werden meist „docked“ eingehangen
top
bottom

26. Ext.create('Ext.tab.Panel', {
width: 400,
height: 200,
tabBar : {
weight : -1
},
renderTo: document.body,
dockedItems : [{
dock : 'top',
xtype : 'toolbar',
weight : -2,
items : [{
text : 'Button 1'
}, {
text : 'Button 2'
}]
}],
items: [{
title: 'Tab 1'
}...]
});

27. Stores & Models

28. Model
Repräsentiert Datenstruktur einzelner Entitäten
Verfügt über Assoziationen
Ext.data.Association: hasMany, belongsTo
Über Proxies können Änderungen an einzelnen
Instanzen persistiert werden
Außerdem:
Feld-Definitionen
Validierung (Ext.data.validations)

29. Store
Kapselt eine Menge von Model Instanzen
Kommuniziert über Proxies mit angeschlossenem
Backend oder Cient (HTML5 Storage)
filtern
sortieren
suchen

30. Proxy
Ext.data.Store/Model: „proxy“ property vom Typ
Ext.data.Proxy, über den auf Daten
lesend
schreibend
zugegriffen werden kann
Proxies lassen sich in zwei Gruppen unterteilen:
Client Proxies
Server Proxies

31. Model – Beispiel Validierung
Ext.define(„Order“, {
extend : 'Ext.data.Model',
var order = Ext.create(„Order“);
var errors = order.validate();
console.log(errors);
fields : [{
name : 'customerName',
type : 'string'
}],
var order = Ext.create(„Order“, {
customerName : 'A. Scott'
validations : [{
type
: 'presence',
field : 'customerName'
});
var errors = order.validate();
console.log(errors);
}]
});
errors =>
[Ext.data.Errors].isValid():boolean

32. Model – Beispiel Assoziation
Ext.define(„Order“, {
var address =
Ext.create(„ShippingAddress“,{
// …
street : 'Comusstrasse 23'
associations : [{
name
: 'shippingAddress',
type
});
: 'hasOne',
model : 'ShippingAddress'
var order = Ext.create(„Order“, {
customerName : 'D. Lightman'
}]
});
});
Ext.define(„ShippingAddress“, {
extend : 'Ext.data.Model',
fields : [{
name : 'street',
type : 'string'
}]
}});
order.setShippingAddress(address);

33. Model – Proxy
Beispiel (Ext.data.proxy.Ajax):
proxy : {
type : 'ajax',
api : {
myOrder.save();
create
: '/order/add/',
read
: '/order/get',
Order.load(123);
update
: '/order/set',
myOrder.save();
Destroy : '/order/delete'
}
}
myOrder.destroy();

34. Aufbau einer
Applikation

35. Applikation - Grundgerüst
*.css
Server
index.html
*.js

36. Applikation – Bootstrapping
Bootstrapping über Ext.application
Einstiegspunkt ist launch() - ähnlich Ext.onReady
Wird aufgerufen, sobald Applikation initialisiert wurde
Resourcen und Viewport werden hier initialisiert
Folgt dem MVC Architekturmuster

37. Applikation - Verzeichnislayout
Typisches Verzeichnislayout:
Namespace: webcon
webcon.controller.*
webcon.model.*
webcon.store.*
webcon.view.*

38. Applikation - Packages
/controller
/model
/view
/store
Ext.app.Controller
Ext.data.Model
Ext.Component
Ext.data.Store
vermittelt zwischen Modelund View-Instanzen
repräsentiert (relationale)
Datenstrukturen
UI Controls
Repräsentiert einen
Datencontainer und verwaltet
n-Instanzen vom Typ
Ext.data.Model

39. Quellen
Folien und Quelltext:
http://thorsten.suckow-homberg.de/webcon-2013
Dokumentation:
http://sencha.com/docs
Twitter:
http://twitter.com/ModusCreate, /ModusJesus, /msims84, /sencha
ExtJS in Action Books:
http://manning.com/garcia
http://manning.com/garcia2
http://manning.com/garcia3
Forum: http://sencha.com/forum