SlideShare a Scribd company logo
Hans-Christian Otto / crosscan GmbH
Dominik Jungowski / CHIP Xonio Online GmbH


RIA - Entwicklung mit Ext JS
@muhdiekuh / @djungowski
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
http://bit.ly/iZJWnw




5
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 & Gr   ow


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: 'ed@sencha.com'},
                 {name: 'Tommy', email: 'tommy@sencha.com'}
             ]
         }
     );




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


     Dummydaten: IPC.Dummydata



26
Glow & Gr   ow


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 & Gr   ow


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 Touch
56
http://bit.ly/mM3W3u

             und

     http://s.c7n.io/VN6H


57
http://joind.in/talk/view/3478

            @muhdiekuh

            @djungowski


58

More Related Content

What's hot

Kruskal algorithm
Kruskal algorithmKruskal algorithm
Kruskal algorithm
Nguyễn Công Hoàng
 
Node.JS
Node.JSNode.JS
Node.JSeibaan
 
modern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jquerymodern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jquery
Adam Zygadlewicz
 
Writeup ctf online idsecconf 2017
Writeup ctf online idsecconf 2017Writeup ctf online idsecconf 2017
Writeup ctf online idsecconf 2017
idsecconf
 
Bai tap tham khao CSPE
Bai tap tham khao CSPEBai tap tham khao CSPE
Bai tap tham khao CSPEmrcoffee282
 
Lenguaje de programación
Lenguaje de programaciónLenguaje de programación
Lenguaje de programación
aldair vizarreta
 
Lenguaje de programación
Lenguaje de programaciónLenguaje de programación
Lenguaje de programación
aldair vizarreta
 
Java весна 2013 лекция 6
Java весна 2013 лекция 6Java весна 2013 лекция 6
Java весна 2013 лекция 6Technopark
 
Pseudocodigo para soluciones de estadistica
Pseudocodigo para soluciones de estadisticaPseudocodigo para soluciones de estadistica
Pseudocodigo para soluciones de estadisticaAngel Vazquez
 

What's hot (11)

Kruskal algorithm
Kruskal algorithmKruskal algorithm
Kruskal algorithm
 
Node.JS
Node.JSNode.JS
Node.JS
 
modern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jquerymodern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jquery
 
3.3
3.33.3
3.3
 
Package pack parnon
Package pack parnonPackage pack parnon
Package pack parnon
 
Writeup ctf online idsecconf 2017
Writeup ctf online idsecconf 2017Writeup ctf online idsecconf 2017
Writeup ctf online idsecconf 2017
 
Bai tap tham khao CSPE
Bai tap tham khao CSPEBai tap tham khao CSPE
Bai tap tham khao CSPE
 
Lenguaje de programación
Lenguaje de programaciónLenguaje de programación
Lenguaje de programación
 
Lenguaje de programación
Lenguaje de programaciónLenguaje de programación
Lenguaje de programación
 
Java весна 2013 лекция 6
Java весна 2013 лекция 6Java весна 2013 лекция 6
Java весна 2013 лекция 6
 
Pseudocodigo para soluciones de estadistica
Pseudocodigo para soluciones de estadisticaPseudocodigo para soluciones de estadistica
Pseudocodigo para soluciones de estadistica
 

More from Dominik Jungowski

Agil vs. $kunde
Agil vs. $kundeAgil vs. $kunde
Agil vs. $kunde
Dominik Jungowski
 
Definition of almost done
Definition of almost doneDefinition of almost done
Definition of almost done
Dominik Jungowski
 
TestDrivenDevelopment.php
TestDrivenDevelopment.phpTestDrivenDevelopment.php
TestDrivenDevelopment.php
Dominik Jungowski
 
Definition of almost done
Definition of almost doneDefinition of almost done
Definition of almost done
Dominik Jungowski
 
Definition of almost Done
Definition of almost DoneDefinition of almost Done
Definition of almost Done
Dominik Jungowski
 
Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?
Dominik Jungowski
 
Schlank oder krank? Mit Lean Startup zum Erfolg
Schlank oder krank? Mit Lean Startup zum ErfolgSchlank oder krank? Mit Lean Startup zum Erfolg
Schlank oder krank? Mit Lean Startup zum Erfolg
Dominik Jungowski
 
Agile Fortschritte erfolgreich verhindern
Agile Fortschritte erfolgreich verhindernAgile Fortschritte erfolgreich verhindern
Agile Fortschritte erfolgreich verhindern
Dominik Jungowski
 
Kanban in der Softwareentwicklung
Kanban in der SoftwareentwicklungKanban in der Softwareentwicklung
Kanban in der Softwareentwicklung
Dominik Jungowski
 
Agile fortschritte erfolgreich verhindern
Agile fortschritte erfolgreich verhindernAgile fortschritte erfolgreich verhindern
Agile fortschritte erfolgreich verhindern
Dominik Jungowski
 
Von Fischen und Menschen
Von Fischen und MenschenVon Fischen und Menschen
Von Fischen und Menschen
Dominik Jungowski
 
Mythen und fakten über behavior driven development
Mythen und fakten über behavior driven developmentMythen und fakten über behavior driven development
Mythen und fakten über behavior driven development
Dominik Jungowski
 
The five dysfunctions of a team
The five dysfunctions of a teamThe five dysfunctions of a team
The five dysfunctions of a team
Dominik Jungowski
 
Stolpersteine agiler Methoden
Stolpersteine agiler MethodenStolpersteine agiler Methoden
Stolpersteine agiler MethodenDominik Jungowski
 
Arbeitsmethoden
ArbeitsmethodenArbeitsmethoden
Arbeitsmethoden
Dominik Jungowski
 
Distributed work with Gearman
Distributed work with GearmanDistributed work with Gearman
Distributed work with Gearman
Dominik Jungowski
 
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JSRIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
Dominik Jungowski
 
Ziele setzen und erreichen
Ziele setzen und erreichenZiele setzen und erreichen
Ziele setzen und erreichen
Dominik Jungowski
 
Pecha Kucha
Pecha KuchaPecha Kucha
Pecha Kucha
Dominik Jungowski
 
Better Quality through Scrum (2011)
Better Quality through Scrum (2011)Better Quality through Scrum (2011)
Better Quality through Scrum (2011)
Dominik Jungowski
 

More from Dominik Jungowski (20)

Agil vs. $kunde
Agil vs. $kundeAgil vs. $kunde
Agil vs. $kunde
 
Definition of almost done
Definition of almost doneDefinition of almost done
Definition of almost done
 
TestDrivenDevelopment.php
TestDrivenDevelopment.phpTestDrivenDevelopment.php
TestDrivenDevelopment.php
 
Definition of almost done
Definition of almost doneDefinition of almost done
Definition of almost done
 
Definition of almost Done
Definition of almost DoneDefinition of almost Done
Definition of almost Done
 
Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?Scrum, Kanban oder vielleicht beides?
Scrum, Kanban oder vielleicht beides?
 
Schlank oder krank? Mit Lean Startup zum Erfolg
Schlank oder krank? Mit Lean Startup zum ErfolgSchlank oder krank? Mit Lean Startup zum Erfolg
Schlank oder krank? Mit Lean Startup zum Erfolg
 
Agile Fortschritte erfolgreich verhindern
Agile Fortschritte erfolgreich verhindernAgile Fortschritte erfolgreich verhindern
Agile Fortschritte erfolgreich verhindern
 
Kanban in der Softwareentwicklung
Kanban in der SoftwareentwicklungKanban in der Softwareentwicklung
Kanban in der Softwareentwicklung
 
Agile fortschritte erfolgreich verhindern
Agile fortschritte erfolgreich verhindernAgile fortschritte erfolgreich verhindern
Agile fortschritte erfolgreich verhindern
 
Von Fischen und Menschen
Von Fischen und MenschenVon Fischen und Menschen
Von Fischen und Menschen
 
Mythen und fakten über behavior driven development
Mythen und fakten über behavior driven developmentMythen und fakten über behavior driven development
Mythen und fakten über behavior driven development
 
The five dysfunctions of a team
The five dysfunctions of a teamThe five dysfunctions of a team
The five dysfunctions of a team
 
Stolpersteine agiler Methoden
Stolpersteine agiler MethodenStolpersteine agiler Methoden
Stolpersteine agiler Methoden
 
Arbeitsmethoden
ArbeitsmethodenArbeitsmethoden
Arbeitsmethoden
 
Distributed work with Gearman
Distributed work with GearmanDistributed work with Gearman
Distributed work with Gearman
 
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JSRIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
 
Ziele setzen und erreichen
Ziele setzen und erreichenZiele setzen und erreichen
Ziele setzen und erreichen
 
Pecha Kucha
Pecha KuchaPecha Kucha
Pecha Kucha
 
Better Quality through Scrum (2011)
Better Quality through Scrum (2011)Better Quality through Scrum (2011)
Better Quality through Scrum (2011)
 

RIA - Entwicklung mit Ext JS

  • 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
  • 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
  • 14. 14
  • 15. 15
  • 16. 16
  • 17. 17
  • 18. Glow & Gr ow 18
  • 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
  • 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
  • 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
  • 37. Glow & Gr ow 37
  • 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
  • 43. 43
  • 51. 51
  • 52. 52
  • 53. 53
  • 57. http://bit.ly/mM3W3u und http://s.c7n.io/VN6H 57
  • 58. http://joind.in/talk/view/3478 @muhdiekuh @djungowski 58