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