Download - RIA - Entwicklung mit Ext JS
![Page 1: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/1.jpg)
RIA - Entwicklung mit Ext JS@muhdiekuh / @djungowski
Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbH
![Page 2: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/2.jpg)
Dominik Jungowski
27 Jahre alt
Teamleiter und ScrumMaster bei CHIP Online
Student der Psychologie an der Fernuni Hagen
Ext JS Entwickler seit 3 Jahren
![Page 3: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/3.jpg)
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
![Page 4: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/4.jpg)
Über Ext JS
![Page 5: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/5.jpg)
Agenda
Warm laufen
Grundlagen
Vertiefung
Anwendung
![Page 7: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/7.jpg)
Was möglich ist
![Page 8: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/8.jpg)
ext.js vs. ext-all.js
![Page 9: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/9.jpg)
Ext.data.proxy.Server
src/data/proxy/Server.js
![Page 10: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/10.jpg)
Ext.onReady(function() { var viewport; viewport = Ext.create( 'Ext.container.Viewport', { html: 'Ext JS is awwwesome!' } );});
![Page 11: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/11.jpg)
![Page 12: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/12.jpg)
viewport = Ext.create( 'Ext.container.Viewport', { layout: 'border', items: [ panel ] });
![Page 13: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/13.jpg)
panel = Ext.create( 'Ext.Panel', { title: 'Harzer Grauhof', region: 'center' });
![Page 14: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/14.jpg)
Border Layout
![Page 15: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/15.jpg)
![Page 16: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/16.jpg)
![Page 17: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/17.jpg)
![Page 18: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/18.jpg)
![Page 19: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/19.jpg)
Stores
![Page 20: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/20.jpg)
Source: Ext JS Api Docs
![Page 21: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/21.jpg)
Source: Ext JS Api Docs
![Page 22: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/22.jpg)
store = Ext.create( 'Ext.data.Store', id: 'IPC.store.GridPanel', { fields: ['name', 'email'], data: [ {name: 'Ed', email: '[email protected]'}, {name: 'Tommy', email: '[email protected]'} ] });
![Page 23: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/23.jpg)
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'} ] });
![Page 24: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/24.jpg)
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'} ] });
![Page 25: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/25.jpg)
![Page 26: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/26.jpg)
Ext.grid.Panel
Dummydaten: IPC.DummydataFields: first, last, age, city
![Page 27: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/27.jpg)
Vererbung
![Page 28: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/28.jpg)
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); }});
![Page 29: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/29.jpg)
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); }});
![Page 30: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/30.jpg)
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); }});
![Page 31: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/31.jpg)
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); }});
![Page 32: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/32.jpg)
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); }});
![Page 33: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/33.jpg)
gridPanel = Ext.create('IPC.grid.Panel');
![Page 34: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/34.jpg)
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); }});
![Page 35: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/35.jpg)
Ext.define
![Page 36: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/36.jpg)
Mixins, Plugins & Features
![Page 37: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/37.jpg)
Events
![Page 38: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/38.jpg)
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 }); } }; ...}
![Page 39: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/39.jpg)
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 }); } }; ...}
![Page 40: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/40.jpg)
gridPanel = Ext.create('IPC.grid.Panel');
gridPanel.on('itemdblclick', function(grid, record) { panel.setTitle(record.get('name'));});
![Page 41: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/41.jpg)
Events
![Page 42: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/42.jpg)
xtypes / lazy initialization
![Page 43: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/43.jpg)
Ext.onReady(function() { var viewport; viewport = Ext.create( 'Ext.container.Viewport', { items: [ { xtype: 'gridpanel', store: 'IPC.grid.Panel', columns: [] } ] } );});
![Page 44: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/44.jpg)
![Page 45: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/45.jpg)
![Page 46: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/46.jpg)
„classes under the hood“
http://edspencer.net/2011/01/classes-in-ext-js-4-under-the-hood.html
![Page 47: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/47.jpg)
Ext.core
![Page 48: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/48.jpg)
Ext.direct
![Page 49: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/49.jpg)
REST
![Page 50: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/50.jpg)
MVC
![Page 51: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/51.jpg)
Menü
![Page 52: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/52.jpg)
TreePanel
![Page 53: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/53.jpg)
Theming
![Page 54: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/54.jpg)
![Page 55: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/55.jpg)
![Page 56: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/56.jpg)
![Page 57: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/57.jpg)
Ext.draw
![Page 58: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/58.jpg)
Ext Designer
![Page 59: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/59.jpg)
IDEAptana, Spket, IntelliJ
![Page 60: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/60.jpg)
Ext.getCmp
http://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp
![Page 61: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/61.jpg)
docs.sencha.com
![Page 62: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/62.jpg)
JSLINT
![Page 63: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/63.jpg)
Sencha Touch
![Page 64: RIA - Entwicklung mit Ext JS](https://reader033.vdocuments.pub/reader033/viewer/2022042813/547a5d5eb37959652b8b4976/html5/thumbnails/64.jpg)
Beispiele Musterlösungen:http://bit.ly/p4Nbwu
http://joind.in/talk/view/3826
@muhdiekuh@djungowski