Folien zum Workshop "RIA - Entwicklung mit Ext JS" auf der International PHP Conference 2011 Spring Edition in Berlin

1. Hans-Christian Otto / crosscan GmbH
Dominik Jungowski / CHIP Xonio Online GmbH
RIA - Entwicklung mit Ext JS
@muhdiekuh / @djungowski

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

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

4. Agenda
Warm laufen
Grundlagen
Vertiefung
Anwendung
4

5. http://bit.ly/iZJWnw
5

6. Was möglich ist
6

7. ext.js vs. ext-all.js
7

8. Ext.data.proxy.Server
8

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

10. 10

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

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

13. DIY: Border Layout
13

14. 14

15. 15

16. 16

17. 17

18. Glow & Gr ow
18

19. Stores
19

20. 20 Source: Ext JS Api Docs

21. 21 Source: Ext JS Api Docs

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

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

24. 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. 25

26. DIY: Ext.grid.Panel
Dummydaten: IPC.Dummydata
26

27. Glow & Gr ow
27

28. Vererbung
28

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

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

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

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

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

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

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

36. DIY: Ext.define
36

37. Glow & Gr ow
37

38. Events
38

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

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

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

42. DIY: Events
42

43. 43

44. Ext.core
44

45. Ext.direct
45

46. REST
46

47. MVC
47

48. Menü
48

49. TreePanel
49

50. Theming
50

51. 51

52. 52

53. 53

54. Ext.draw
54

55. Ext Designer
55

56. Sencha Touch
56

57. http://bit.ly/mM3W3u
und
http://s.c7n.io/VN6H
57

58. http://joind.in/talk/view/3478
@muhdiekuh
@djungowski
58