SlideShare ist ein Scribd-Unternehmen logo
1 von 39
Einführung in Ext JS 4
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
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
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
Features

Charting
MVC
Powerful Grids
Theming
Component Query
Sandboxing
Verbessertes Klassensystem
SCREENSHOT SCIRCLES http://s-circles.com
Klassensystem
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()
Klassensystem - Einführung

var user = Ext.create('User');

var user = new User();
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'
Klassensystem - Vererbung

Ext.define('User.Customer', {
extend : 'User',
street

: '',

city

User

: '',

zipCode : ''
});

Customer
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)

});
}
});
Komponenten
Komponenten
Komponenten – Component

Controls in ExtJS sind „Komponenten“ Ext.Component
Eigenschaften:
show/hide
enable/disable
xtype
child components via Ext.Container
observable!
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
Komponenten – Component > Container (Layouts)

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

Zum Beispiel:

Quelle: http://www.sencha.com/docs/
Komponenten – Component > Container > Panel

in ExtJS Container für verschiedene funktionelle
Aufgaben:
TabPanel
TreePanel
GridPanel
...
Ext.create('Ext.tab.Panel', {
width: 400,
height: 200,
renderTo: document.body,
items: [{
title: 'Tab 1'
}, {
title: 'Tab 2'
}, {
title: 'Tab 3'
}]
});

defaultType
Komponenten – Component > Container > Toolbar

Container zur Aufnahme von Steuer- oder
Eingabeelementen
Toolbars werden meist „docked“ eingehangen
top
bottom
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'
}...]
});
Stores & Models
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)
Store

Kapselt eine Menge von Model Instanzen
Kommuniziert über Proxies mit angeschlossenem
Backend oder Cient (HTML5 Storage)
filtern
sortieren
suchen
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
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
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);
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();
Aufbau einer
Applikation
Applikation - Grundgerüst

*.css

Server

index.html

*.js
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
Applikation - Verzeichnislayout

Typisches Verzeichnislayout:

Namespace: webcon
webcon.controller.*
webcon.model.*
webcon.store.*
webcon.view.*
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
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

Weitere ähnliche Inhalte

Ähnlich wie Einfuehrung in ExtJS 4

Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
dominion
 
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
Aberla
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Johannes Hohenbichler
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
Christian Baranowski
 

Ähnlich wie Einfuehrung in ExtJS 4 (20)

Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
"Best Practices" in Contao
"Best Practices" in Contao"Best Practices" in Contao
"Best Practices" in Contao
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
 
Back to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDB
Back to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDBBack to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDB
Back to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDB
 
Windows Powershell
Windows PowershellWindows Powershell
Windows Powershell
 
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
 
Java Magazin - Lift
Java Magazin - LiftJava Magazin - Lift
Java Magazin - Lift
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
 
WiSe 2014 | Softwaretechnologie I _ Funktionen, Zeiger, Strukturen, Bibliotheken
WiSe 2014 | Softwaretechnologie I _ Funktionen, Zeiger, Strukturen, BibliothekenWiSe 2014 | Softwaretechnologie I _ Funktionen, Zeiger, Strukturen, Bibliotheken
WiSe 2014 | Softwaretechnologie I _ Funktionen, Zeiger, Strukturen, Bibliotheken
 
Daten verknüpfen - Geschäftsprozesse organisieren: der ExsoFlow-Server
Daten verknüpfen - Geschäftsprozesse organisieren: der ExsoFlow-ServerDaten verknüpfen - Geschäftsprozesse organisieren: der ExsoFlow-Server
Daten verknüpfen - Geschäftsprozesse organisieren: der ExsoFlow-Server
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
 
Abläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisierenAbläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisieren
 
PyLucene@PyCon DE 2011
PyLucene@PyCon DE 2011PyLucene@PyCon DE 2011
PyLucene@PyCon DE 2011
 
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
 

Einfuehrung in ExtJS 4

Hinweis der Redaktion

  1. Paradigmenwechseln:Hinweis auf unterschiedliche Benutzerführung. Mehr wird durch weniger realisiert: Komplexer tree wird bspw. Mit einer Nested List dargestellt.
  2. Hinweis auf Getter und setterName, key und foreign key
  3. Hinweis auf Getter und setterName, key und foreign key