Download - RIA - Entwicklung mit Ext JS
![Page 1: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/1.jpg)
RIA - Entwicklung mit Ext JS@muhdiekuh / @djungowski
Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbH
![Page 2: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/2.jpg)
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
![Page 3: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/3.jpg)
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
![Page 4: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/4.jpg)
Agenda
Warm laufen
Grundlagen
Vertiefung
Anwendung
4
![Page 6: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/6.jpg)
Was möglich ist
6
![Page 7: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/7.jpg)
ext.js vs. ext-all.js
7
![Page 8: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/8.jpg)
Ext.data.proxy.Server
8
![Page 9: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/9.jpg)
Ext.onReady(function() { var viewport; viewport = Ext.create( 'Ext.container.Viewport', { html: 'Ext JS is awwwesome!' } );});
9
![Page 10: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/10.jpg)
10
![Page 11: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/11.jpg)
viewport = Ext.create( 'Ext.container.Viewport', { layout: 'border', items: [ panel ] });
11
![Page 12: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/12.jpg)
panel = Ext.create( 'Ext.Panel', { title: 'Harzer Grauhof', region: 'center' });
12
![Page 13: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/13.jpg)
DIY: Border Layout
13
![Page 14: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/14.jpg)
14
![Page 15: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/15.jpg)
15
![Page 16: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/16.jpg)
16
![Page 17: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/17.jpg)
17
![Page 18: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/18.jpg)
Glow & Grow
18
![Page 19: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/19.jpg)
Stores
19
![Page 20: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/20.jpg)
20 Source: Ext JS Api Docs
![Page 21: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/21.jpg)
21 Source: Ext JS Api Docs
![Page 22: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/22.jpg)
store = Ext.create( 'Ext.data.Store', id: 'IPC.store.GridPanel', { fields: ['name', 'email'], data: [ {name: 'Ed', email: '[email protected]'}, {name: 'Tommy', email: '[email protected]'} ] });
22
![Page 23: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/23.jpg)
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
![Page 24: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/24.jpg)
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
![Page 25: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/25.jpg)
25
![Page 26: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/26.jpg)
DIY: Ext.grid.Panel
26
Dummydaten: IPC.Dummydata
![Page 27: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/27.jpg)
Glow & Grow
27
![Page 28: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/28.jpg)
Vererbung
28
![Page 29: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/29.jpg)
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
![Page 30: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/30.jpg)
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
![Page 31: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/31.jpg)
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
![Page 32: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/32.jpg)
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
![Page 33: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/33.jpg)
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
![Page 34: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/34.jpg)
gridPanel = Ext.create('IPC.grid.Panel');
34
![Page 35: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/35.jpg)
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
![Page 36: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/36.jpg)
DIY: Ext.define
36
![Page 37: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/37.jpg)
Glow & Grow
37
![Page 38: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/38.jpg)
Events
38
![Page 39: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/39.jpg)
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
![Page 40: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/40.jpg)
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
![Page 41: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/41.jpg)
gridPanel = Ext.create('IPC.grid.Panel');
gridPanel.on('itemdblclick', function(grid, record) { panel.setTitle(record.get('name'));});
41
![Page 42: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/42.jpg)
DIY: Events
42
![Page 43: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/43.jpg)
43
![Page 44: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/44.jpg)
Ext.core
44
![Page 45: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/45.jpg)
Ext.direct
45
![Page 46: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/46.jpg)
REST
46
![Page 47: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/47.jpg)
MVC
47
![Page 48: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/48.jpg)
Menü
48
![Page 49: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/49.jpg)
TreePanel
49
![Page 50: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/50.jpg)
Theming
50
![Page 51: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/51.jpg)
51
![Page 52: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/52.jpg)
52
![Page 53: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/53.jpg)
53
![Page 54: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/54.jpg)
Ext.draw
54
![Page 55: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/55.jpg)
Ext Designer
55
![Page 56: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/56.jpg)
Sencha Touch56
![Page 57: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/57.jpg)
http://bit.ly/mM3W3u
und
http://s.c7n.io/VN6H
57
![Page 58: RIA - Entwicklung mit Ext JS](https://reader034.vdocuments.net/reader034/viewer/2022051322/546a7ba5af7959973b8b6863/html5/thumbnails/58.jpg)
http://joind.in/talk/view/3478
@muhdiekuh
@djungowski
58