Weitere ähnliche Inhalte Mehr von Dominik Jungowski (20) RIA - Entwicklung mit Ext JS1. 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
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
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
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