This document summarizes a presentation given by Hans-Christian Otto and Dominik Jungowski on RIA development using Ext JS. It includes brief biographies of the presenters and an outline of the presentation topics, which cover Ext JS fundamentals, advanced concepts, and real-world applications. Examples shown include creating viewports, panels, stores, and handling events. The presentation aims to provide both an introduction and deeper exploration of Ext JS capabilities.

1. Hans-Christian Otto / crosscan GmbH
Dominik Jungowski / CHIP Xonio Online GmbH
RIA - Entwicklung mit Ext JS
@muhdiekuh / @djungowski

2. Dominik Jungowski
27 Jahre alt
Teamleiter und ScrumMaster bei CHIP Online
Student der Psychologie an der Fernuni Hagen
Ext JS Entwickler seit 3 Jahren

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

4. Über Ext JS

5. Agenda
Warm laufen
Grundlagen
Vertiefung
Anwendung

6. http://bit.ly/iZJWnw

7. Was möglich ist

8. ext.js vs. ext-all.js

9. Ext.data.proxy.Server
src/data/proxy/Server.js

10. Ext.onReady(function() {
var viewport;
viewport = Ext.create(
'Ext.container.Viewport',
{
html: 'Ext JS is awwwesome!'
}
);
});

12. viewport = Ext.create(
'Ext.container.Viewport',
{
layout: 'border',
items: [
panel
]
}
);

13. panel = Ext.create(
'Ext.Panel',
{
title: 'Harzer Grauhof',
region: 'center'
}
);

14. Border Layout

19. Stores

20. Source: Ext JS Api Docs

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

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

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

26. Ext.grid.Panel
Dummydaten: IPC.Dummydata
Fields: first, last, age, city

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. Ext.define

36. Mixins, Plugins & Features

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. Events

42. xtypes / lazy initialization

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

46. „classes under the hood“
http://edspencer.net/2011/01/classes-in-ext-js-4-under-the-hood.html

47. Ext.core

48. Ext.direct

49. REST

50. MVC

51. Menü

52. TreePanel

53. Theming

57. Ext.draw

58. Ext Designer

59. IDE
Aptana, Spket, IntelliJ

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

61. docs.sencha.com

62. JSLINT

63. Sencha Touch

64. Beispiele Musterlösungen:
http://bit.ly/p4Nbwu
http://joind.in/talk/view/3826
@muhdiekuh
@djungowski