Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbHRIA - Entwicklung mit Ext JS@muhdiekuh / @dju...
Dominik Jungowski    26 Jahre alt    Entwickler und ScrumMaster bei CHIP Online    Student der Psychologie an der Fernuni ...
Hans-Christian Otto    22 Jahre alt    Leiter der Software-Entwicklung bei der crosscan GmbH    Student der Informatik an ...
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,        ...
10
viewport = Ext.create(         Ext.container.Viewport,         {             layout: border,             items: [         ...
panel = Ext.create(         Ext.Panel,         {             title: Harzer Grauhof,             region: center         }  ...
DIY: Border Layout13
14
15
16
17
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], ...
gridPanel = Ext.create(         Ext.grid.Panel,         {             title : All Users,             region: west,        ...
gridPanel = Ext.create(         Ext.grid.Panel,         {             title : All Users,             region: west,        ...
25
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,         widt...
Ext.define(IPC.grid.Panel, {         extend: Ext.grid.Panel,         title : All Users,         region: west,         widt...
Ext.define(IPC.grid.Panel, {         extend: Ext.grid.Panel,         title : All Users,         region: west,         widt...
Ext.define(IPC.grid.Panel, {         extend: Ext.grid.Panel,         title : All Users,         region: west,         widt...
Ext.define(IPC.grid.Panel, {         extend: Ext.grid.Panel,         title : All Users,         region: west,         widt...
gridPanel = Ext.create(IPC.grid.Panel);34
Ext.define(IPC.grid.Panel, {         extend: Ext.grid.Panel,         title : All Users,         region: west,         widt...
DIY: Ext.define36
Glow & Gr   ow37
Events38
initComponent: function() {         ...         this.listeners = {              itemdblclick: function(grid, record, item,...
initComponent: function() {         ...         this.listeners = {              itemdblclick: function(grid, record, item,...
gridPanel = Ext.create(IPC.grid.Panel);     gridPanel.on(itemdblclick, function(grid, record) {         panel.setTitle(rec...
DIY: Events42
43
Ext.core44
Ext.direct45
REST46
MVC47
Menü48
TreePanel49
Theming50
51
52
53
Ext.draw54
Ext Designer55
Sencha Touch56
http://bit.ly/mM3W3u             und     http://s.c7n.io/VN6H57
http://joind.in/talk/view/3478            @muhdiekuh            @djungowski58
Upcoming SlideShare
Loading in …5
×

RIA - Entwicklung mit Ext JS

2,330 views

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • Danke für das SlideShare und die wirklich interessanten Informationen.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,330
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
24
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

RIA - Entwicklung mit Ext JS

  1. 1. Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbHRIA - Entwicklung mit Ext JS@muhdiekuh / @djungowski
  2. 2. Dominik Jungowski 26 Jahre alt Entwickler und ScrumMaster bei CHIP Online Student der Psychologie an der Fernuni Hagen Ext JS Entwickler seit 3 Jahren2
  3. 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 Jahren3
  4. 4. Agenda Warm laufen Grundlagen Vertiefung Anwendung4
  5. 5. http://bit.ly/iZJWnw5
  6. 6. Was möglich ist6
  7. 7. ext.js vs. ext-all.js7
  8. 8. Ext.data.proxy.Server8
  9. 9. Ext.onReady(function() { var viewport; viewport = Ext.create( Ext.container.Viewport, { html: Ext JS is awwwesome! } ); });9
  10. 10. 10
  11. 11. viewport = Ext.create( Ext.container.Viewport, { layout: border, items: [ panel ] } );11
  12. 12. panel = Ext.create( Ext.Panel, { title: Harzer Grauhof, region: center } );12
  13. 13. DIY: Border Layout13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. Glow & Gr ow18
  19. 19. Stores19
  20. 20. 20 Source: Ext JS Api Docs
  21. 21. 21 Source: Ext JS Api Docs
  22. 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. 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. 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. 25
  26. 26. DIY: Ext.grid.Panel Dummydaten: IPC.Dummydata26
  27. 27. Glow & Gr ow27
  28. 28. Vererbung28
  29. 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. 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. 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. 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. 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. 34. gridPanel = Ext.create(IPC.grid.Panel);34
  35. 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. 36. DIY: Ext.define36
  37. 37. Glow & Gr ow37
  38. 38. Events38
  39. 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. 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. 41. gridPanel = Ext.create(IPC.grid.Panel); gridPanel.on(itemdblclick, function(grid, record) { panel.setTitle(record.get(name)); });41
  42. 42. DIY: Events42
  43. 43. 43
  44. 44. Ext.core44
  45. 45. Ext.direct45
  46. 46. REST46
  47. 47. MVC47
  48. 48. Menü48
  49. 49. TreePanel49
  50. 50. Theming50
  51. 51. 51
  52. 52. 52
  53. 53. 53
  54. 54. Ext.draw54
  55. 55. Ext Designer55
  56. 56. Sencha Touch56
  57. 57. http://bit.ly/mM3W3u und http://s.c7n.io/VN6H57
  58. 58. http://joind.in/talk/view/3478 @muhdiekuh @djungowski58

×