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

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

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

7.
Klassensystem

8.
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()

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

10.
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'

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

12.
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)
});
}
});

13.
Komponenten

14.
Komponenten

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

16.
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

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

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

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

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

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

22.
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'
}...]
});

23.
Stores & Models

24.
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)

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

26.
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

27.
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

28.
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);

29.
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();

30.
Aufbau einer
Applikation

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

32.
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

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

34.
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

35.
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