Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbHRIA - Entwicklung mit Ext JS@muhdiekuh / @dju...
Dominik Jungowski27 Jahre altTeamleiter und ScrumMaster bei CHIP OnlineStudent der Psychologie an der Fernuni HagenExt JS ...
Hans-Christian Otto22 Jahre altLeiter der Software-Entwicklung bei der crosscan GmbHStudent der Informatik an der TU Dortm...
Über Ext JS
AgendaWarm laufenGrundlagenVertiefungAnwendung
http://bit.ly/iZJWnw
Was möglich ist
ext.js vs. ext-all.js
Ext.data.proxy.Server   src/data/proxy/Server.js
Ext.onReady(function() {    var viewport;      viewport = Ext.create(          Ext.container.Viewport,          {         ...
viewport = Ext.create(    Ext.container.Viewport,    {        layout: border,        items: [            panel        ]   ...
panel = Ext.create(    Ext.Panel,    {        title: Harzer Grauhof,        region: center    });
Border Layout
Stores
Source: Ext JS Api Docs
Source: Ext JS Api Docs
store = Ext.create(    Ext.data.Store,    id: IPC.store.GridPanel,    {        fields: [name, email],        data: [      ...
gridPanel = Ext.create(    Ext.grid.Panel,    {        title : All Users,        region: west,        width: 200,        l...
gridPanel = Ext.create(    Ext.grid.Panel,    {        title : All Users,        region: west,        width: 200,        l...
Ext.grid.PanelDummydaten: IPC.Dummydata    Fields: first, last, age, city
Vererbung
Ext.define(IPC.grid.Panel, {    extend: Ext.grid.Panel,    title : All Users,    region: west,    width: 200,    loadMask:...
Ext.define(IPC.grid.Panel, {    extend: Ext.grid.Panel,    title : All Users,    region: west,    width: 200,    loadMask:...
Ext.define(IPC.grid.Panel, {    extend: Ext.grid.Panel,    title : All Users,    region: west,    width: 200,    loadMask:...
Ext.define(IPC.grid.Panel, {    extend: Ext.grid.Panel,    title : All Users,    region: west,    width: 200,    loadMask:...
Ext.define(IPC.grid.Panel, {    extend: Ext.grid.Panel,    title : All Users,    region: west,    width: 200,    loadMask:...
gridPanel = Ext.create(IPC.grid.Panel);
Ext.define(IPC.grid.Panel, {    extend: Ext.grid.Panel,    title : All Users,    region: west,    width: 200,    columns: ...
Ext.define
Mixins, Plugins & Features
Events
initComponent: function() {    ...    this.listeners = {         itemdblclick: function(grid, record, item, index,event) {...
initComponent: function() {    ...    this.listeners = {         itemdblclick: function(grid, record, item, index,event) {...
gridPanel = Ext.create(IPC.grid.Panel);gridPanel.on(itemdblclick, function(grid, record) {    panel.setTitle(record.get(na...
Events
xtypes / lazy initialization
Ext.onReady(function() {    var viewport;      viewport = Ext.create(          Ext.container.Viewport,          {         ...
„classes under the hood“http://edspencer.net/2011/01/classes-in-ext-js-4-under-the-hood.html
Ext.core
Ext.direct
REST
MVC
Menü
TreePanel
Theming
Ext.draw
Ext Designer
IDEAptana, Spket, IntelliJ
Ext.getCmphttp://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp
docs.sencha.com
JSLINT
Sencha Touch
Beispiele Musterlösungen:   http://bit.ly/p4Nbwuhttp://joind.in/talk/view/3826       @muhdiekuh       @djungowski
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
Upcoming SlideShare
Loading in …5
×

RIA - Entwicklung mit Ext JS

1,999 views

Published on

Slides für den Ganztages-Workshop "RIA - Entwicklung mit Ext JS" auf der International PHP Conference 2011

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,999
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
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 Jungowski27 Jahre altTeamleiter und ScrumMaster bei CHIP OnlineStudent der Psychologie an der Fernuni HagenExt JS Entwickler seit 3 Jahren
  3. 3. Hans-Christian Otto22 Jahre altLeiter der Software-Entwicklung bei der crosscan GmbHStudent der Informatik an der TU DortmundExt JS Entwickler seit 4 Jahren
  4. 4. Über Ext JS
  5. 5. AgendaWarm laufenGrundlagenVertiefungAnwendung
  6. 6. http://bit.ly/iZJWnw
  7. 7. Was möglich ist
  8. 8. ext.js vs. ext-all.js
  9. 9. Ext.data.proxy.Server src/data/proxy/Server.js
  10. 10. Ext.onReady(function() { var viewport; viewport = Ext.create( Ext.container.Viewport, { html: Ext JS is awwwesome! } );});
  11. 11. viewport = Ext.create( Ext.container.Viewport, { layout: border, items: [ panel ] });
  12. 12. panel = Ext.create( Ext.Panel, { title: Harzer Grauhof, region: center });
  13. 13. Border Layout
  14. 14. Stores
  15. 15. Source: Ext JS Api Docs
  16. 16. Source: Ext JS Api Docs
  17. 17. 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} ] });
  18. 18. 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} ] });
  19. 19. 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} ] });
  20. 20. Ext.grid.PanelDummydaten: IPC.Dummydata Fields: first, last, age, city
  21. 21. Vererbung
  22. 22. 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); }});
  23. 23. 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); }});
  24. 24. 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); }});
  25. 25. 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); }});
  26. 26. 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); }});
  27. 27. gridPanel = Ext.create(IPC.grid.Panel);
  28. 28. 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); }});
  29. 29. Ext.define
  30. 30. Mixins, Plugins & Features
  31. 31. Events
  32. 32. 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 }); } }; ...}
  33. 33. 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 }); } }; ...}
  34. 34. gridPanel = Ext.create(IPC.grid.Panel);gridPanel.on(itemdblclick, function(grid, record) { panel.setTitle(record.get(name));});
  35. 35. Events
  36. 36. xtypes / lazy initialization
  37. 37. Ext.onReady(function() { var viewport; viewport = Ext.create( Ext.container.Viewport, { items: [ { xtype: gridpanel, store: IPC.grid.Panel, columns: [] } ] } );});
  38. 38. „classes under the hood“http://edspencer.net/2011/01/classes-in-ext-js-4-under-the-hood.html
  39. 39. Ext.core
  40. 40. Ext.direct
  41. 41. REST
  42. 42. MVC
  43. 43. Menü
  44. 44. TreePanel
  45. 45. Theming
  46. 46. Ext.draw
  47. 47. Ext Designer
  48. 48. IDEAptana, Spket, IntelliJ
  49. 49. Ext.getCmphttp://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp
  50. 50. docs.sencha.com
  51. 51. JSLINT
  52. 52. Sencha Touch
  53. 53. Beispiele Musterlösungen: http://bit.ly/p4Nbwuhttp://joind.in/talk/view/3826 @muhdiekuh @djungowski

×