Download - Einfuehrung in ExtJS 4
Folie 1
Einfhrung in Ext JS 4
Thorsten Suckow-Homberg, Jahrgang 1976PHP & Javascript seit 1999
Sencha seit 2007
Autor des conjoon Open Source Projektes (conjoon.org)
arbeitet fr die eyeworkers interactive GmbH, Karlsruhe ( jobs.eyeworkers.de )
@thorstensuckow
Worum geht es hier?
Ext JS4 HTML 5 Framework zur Erstellung web- basierter Applikationen
Geschichtlicher berblick und Einblicke indas 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 populrste 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 - Einfhrung
Sencha arbeitet mit einem eigenen System, um OOP in JS abzubilden
Verwendet unter der Haube natrlich weiterhin die Strken des PrototypingOverrides, Mixins
new fllt weg, dafr Ext.create()
Klassendefinition ber Ext.define()
Klassensystem - Einfhrung
var user = Ext.create('User');
var user = new User();
Klassensystem - Einfhrung
var user = Ext.create('User');
var user = new User();
var user = Ext.create('User', { firstname : 'Max', lastname : 'Mustermann'});
var user = new User('Mustermann', 'Max');
Klassensystem - Vererbung
Ext.define('User.Customer', { extend : 'User', street : '', city : '', zipCode : ''});
UserCustomer
Klassensystem - Mixins
Mixins erlauben es, Funktionalitt anderer Klassen in eine andere zu streuen
Traits in PHP
Nur Verhalten wird kopiert, nicht aber der Typ!
Ext.define('Prism', {
spy : function() { alert(I'm watching you); }
});
Ext.define('Internet', { mixins : { stayAnonymous : 'Prism' },
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 fr alle Komponenten, die andere Komponenten aufnehmen knnenToolbars
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 fr verschiedene funktionelle Aufgaben:TabPanel
TreePanel
GridPanel
...
Paradigmenwechseln:Hinweis auf unterschiedliche Benutzerfhrung.Mehr wird durch weniger realisiert: Komplexer tree wird bspw. Mit einer Nested List dargestellt.
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 eingehangentop
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
Reprsentiert Datenstruktur einzelner Entitten
Verfgt ber AssoziationenExt.data.Association: hasMany, belongsTo
ber Proxies knnen nderungen an einzelnen Instanzen persistiert werden
Auerdem: 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 Datenlesend
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', fields : [{ name : 'customerName', type : 'string' }], validations : [{ type : 'presence', field : 'customerName' }]});
var order = Ext.create(Order, { customerName : 'A. Scott'});var errors = order.validate();console.log(errors);
var order = Ext.create(Order);var errors = order.validate();console.log(errors);
errors =>[Ext.data.Errors].isValid():boolean
Model Beispiel Assoziation
Ext.define(Order, { // associations : [{ name : 'shippingAddress', type : 'hasOne', model : 'ShippingAddress' }]});Ext.define(ShippingAddress, { extend : 'Ext.data.Model', fields : [{ name : 'street', type : 'string' }]}});
var address = Ext.create(ShippingAddress,{ street : 'Comusstrasse 23'});
var order = Ext.create(Order, { customerName : 'D. Lightman'});
order.setShippingAddress(address);
Hinweis auf Getter und setterName, key und foreign key
Model Proxy
proxy : { type : 'ajax', api : { create : '/order/add/', read : '/order/get', update : '/order/set', Destroy : '/order/delete' }}
Beispiel (Ext.data.proxy.Ajax):
myOrder.save();Order.load(123);myOrder.save();myOrder.destroy();Hinweis auf Getter und setterName, key und foreign key
Aufbau einer Applikation
Applikation - Grundgerst
index.html
*.js*.cssServer
Applikation Bootstrapping
Bootstrapping ber Ext.application
Einstiegspunkt ist launch() - hnlich Ext.onReadyWird 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.ControllerExt.data.ModelExt.ComponentExt.data.Store
vermittelt zwischen Model- und View-Instanzenreprsentiert (relationale) DatenstrukturenUI ControlsReprsentiert 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