• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
RIA - Entwicklung mit Ext JS
 

RIA - Entwicklung mit Ext JS

on

  • 1,660 views

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

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

Statistics

Views

Total Views
1,660
Views on SlideShare
1,659
Embed Views
1

Actions

Likes
1
Downloads
24
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    RIA - Entwicklung mit Ext JS RIA - Entwicklung mit Ext JS Presentation Transcript

    • Hans-Christian Otto / crosscan GmbHDominik Jungowski / CHIP Xonio Online GmbHRIA - Entwicklung mit Ext JS@muhdiekuh / @djungowski
    • Dominik Jungowski27 Jahre altTeamleiter und ScrumMaster bei CHIP OnlineStudent der Psychologie an der Fernuni HagenExt JS Entwickler seit 3 Jahren
    • Hans-Christian Otto22 Jahre altLeiter der Software-Entwicklung bei der crosscan GmbHStudent der Informatik an der TU DortmundExt JS Entwickler seit 4 Jahren
    • Ü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, { 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.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: 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.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