RIA - Entwicklung mit Ext JS

Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbHRIA - Entwicklung mit Ext JS@muhdiekuh / @djungowski

Dominik Jungowski27 Jahre altTeamleiter und ScrumMaster bei CHIP OnlineStudent der Psychologie an der Fernuni HagenExt JS Entwickler seit 3 Jahren

Hans-Christian Otto22 Jahre altLeiter der Software-Entwicklung bei der crosscan GmbHStudent der Informatik an der TU DortmundExt JS Entwickler seit 4 Jahren

Über Ext JS

AgendaWarm laufenGrundlagenVertiefungAnwendung

http://bit.ly/iZJWnw

Was möglich ist

ext.js vs. ext-all.js

Ext.data.proxy.Server src/data/proxy/Server.js

Ext.onReady(function() { var viewport; viewport = Ext.create( Ext.container.Viewport, { html: Ext JS is awwwesome! } );});

viewport = Ext.create( Ext.container.Viewport, { layout: border, items: [ panel ] });

panel = Ext.create( Ext.Panel, { title: Harzer Grauhof, region: center });

Border Layout

Stores

Source: Ext JS Api Docs

store = Ext.create( Ext.data.Store, id: IPC.store.GridPanel, { fields: [name, email], data: [ {name: Ed, email: ed@sencha.com}, {name: Tommy, email: tommy@sencha.com} ] });

gridPanel = Ext.create( Ext.grid.Panel, { title : All Users, region: west, width: 200, loadMask: true, store: IPC.store.GridPanel, columns: [ {header: Name, dataIndex: name}, {header: Email, dataIndex: email} ] });

Ext.grid.PanelDummydaten: IPC.Dummydata Fields: first, last, age, city

Vererbung

Ext.define(IPC.grid.Panel, { extend: Ext.grid.Panel, title : All Users, region: west, width: 200, loadMask: true, initComponent: function() { this.store = IPC.store.GridPanel; this.columns = [ {header: Name, dataIndex: name}, {header: Email, dataIndex: email} ]; this.callParent(arguments); }});

gridPanel = Ext.create(IPC.grid.Panel);

Ext.define(IPC.grid.Panel, { extend: Ext.grid.Panel, title : All Users, region: west, width: 200, columns: [ {header: Name, dataIndex: name}, {header: Email, dataIndex: email} ], loadMask: true, initComponent: function() { this.store = IPC.store.GridPanel; this.callParent(arguments); }});

Ext.define

Mixins, Plugins & Features

Events

initComponent: function() { ... this.listeners = { itemdblclick: function(grid, record, item, index,event) { var email = record.get(email); Ext.Msg.show({ title: Email-Adresse, msg: email, buttons: Ext.Msg.OK, icon: Ext.Msg.INFO }); } }; ...}

gridPanel = Ext.create(IPC.grid.Panel);gridPanel.on(itemdblclick, function(grid, record) { panel.setTitle(record.get(name));});

Events

xtypes / lazy initialization

Ext.onReady(function() { var viewport; viewport = Ext.create( Ext.container.Viewport, { items: [ { xtype: gridpanel, store: IPC.grid.Panel, columns: [] } ] } );});

„classes under the hood“http://edspencer.net/2011/01/classes-in-ext-js-4-under-the-hood.html

Ext.core

Ext.direct

TreePanel

Theming

Ext.draw

Ext Designer

IDEAptana, Spket, IntelliJ

Ext.getCmphttp://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp

docs.sencha.com

JSLINT

Sencha Touch

Beispiele Musterlösungen: http://bit.ly/p4Nbwuhttp://joind.in/talk/view/3826 @muhdiekuh @djungowski

RIA - Entwicklung mit Ext JS

by Dominik Jungowski on Oct 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

RIA - Entwicklung mit Ext JS — Presentation Transcript