RIA - Entwicklung mit Ext JS

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

Dominik Jungowski 26 Jahre alt Entwickler und ScrumMaster bei CHIP Online Student der Psychologie an der Fernuni Hagen Ext JS Entwickler seit 3 Jahren2

Hans-Christian Otto 22 Jahre alt Leiter der Software-Entwicklung bei der crosscan GmbH Student der Informatik an der TU Dortmund Ext JS Entwickler seit 4 Jahren3

Agenda Warm laufen Grundlagen Vertiefung Anwendung4

http://bit.ly/iZJWnw5

Was möglich ist6

ext.js vs. ext-all.js7

Ext.data.proxy.Server8

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

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

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

DIY: Border Layout13

Glow & Gr ow18

Stores19

20 Source: Ext JS Api Docs

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

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} ] } );23

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

DIY: Ext.grid.Panel Dummydaten: IPC.Dummydata26

Glow & Gr ow27

Vererbung28

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); } });29

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

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); } });35

DIY: Ext.define36

Glow & Gr ow37

Events38

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

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

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

DIY: Events42

Ext.core44

Ext.direct45

REST46

Menü48

TreePanel49

Theming50

Ext.draw54

Ext Designer55

Sencha Touch56

http://bit.ly/mM3W3u und http://s.c7n.io/VN6H57

http://joind.in/talk/view/3478 @muhdiekuh @djungowski58

RIA - Entwicklung mit Ext JS

by Dominik Jungowski on May 31, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 22

Statistics

RIA - Entwicklung mit Ext JS — Presentation Transcript

http://jaxentercom.loc	20
http://www.techgig.com	2