RIA - Entwicklung mit Ext JS

RIA - Entwicklung mit Ext JS@muhdiekuh / @djungowski

Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbH

Dominik Jungowski

26 Jahre alt

Entwickler und ScrumMaster bei CHIP Online

Student der Psychologie an der Fernuni Hagen

Ext JS Entwickler seit 3 Jahren

2

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 Jahren

3

Agenda

Warm laufen

Grundlagen

Vertiefung

Anwendung

4

http://bit.ly/iZJWnw

5

Was möglich ist

6

ext.js vs. ext-all.js

7

Ext.data.proxy.Server

8

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

9

10

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

11

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

12

DIY: Border Layout

13

14

15

16

17

Glow & Grow

18

Stores

19

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

25

DIY: Ext.grid.Panel

26

Dummydaten: IPC.Dummydata

Glow & Grow

27

Vererbung

28

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

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

30

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

31

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

32

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

33

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.define

36

Glow & Grow

37

Events

38

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: Events

42

43

Ext.core

44

Ext.direct

45

REST

46

MVC

47

Menü

48

TreePanel

49

Theming

50

51

52

53

Ext.draw

54

Ext Designer

55

Sencha Touch56

http://bit.ly/mM3W3u

und

http://s.c7n.io/VN6H

57

http://joind.in/talk/view/3478

@muhdiekuh

@djungowski

58