RIA - Entwicklung mit Ext JS@muhdiekuh / @djungowski

Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbH

Dominik Jungowski

27 Jahre alt

Teamleiter und ScrumMaster bei CHIP Online

Student der Psychologie an der Fernuni Hagen

Ext JS Entwickler seit 3 Jahren

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

Über Ext JS

Agenda

Warm laufen

Grundlagen

Vertiefung

Anwendung

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', { html: 'Ext JS is awwwesome!' } );});

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

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'} ] });

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'} ] });

Ext.grid.Panel

Dummydaten: IPC.DummydataFields: first, last, age, city

Vererbung

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

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

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

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

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

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

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

Ext.define

Mixins, Plugins & Features

Events

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

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

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

gridPanel.on('itemdblclick', function(grid, record) { panel.setTitle(record.get('name'));});

Events

xtypes / lazy initialization

Ext.onReady(function() { var viewport; viewport = Ext.create( 'Ext.container.Viewport', { items: [ { xtype: 'gridpanel', store: 'IPC.grid.Panel', columns: [] } ] } );});

„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.getCmp

http://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp

docs.sencha.com

JSLINT

Sencha Touch

Beispiele Musterlösungen:http://bit.ly/p4Nbwu

http://joind.in/talk/view/3826

@muhdiekuh@djungowski