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
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: '[email protected]'}, {name: 'Tommy', email: '[email protected]'} ] });
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
Top Related