1. Einführung in ExtJS4.0

2. Was ist ExtJS? Ext JS ist ein clientseitiges JavaScript- bzw. Ajax-Framework für interaktive Webanwendungen. […] In erster Linie bietet Ext JS eine umfangreiche Sammlung von Steuerelementen. http://de.wikipedia.org/wiki/Extjs 27.06.2011 Einführung in ExtJS 2

3. Was bietet mir ExtJS? viele vorgefertigte Komponenten Core & Community schnelle Ergebnisse einfaches Theming durch SASS MVC-Prinzip gute Dokumentation! gutes Learning-Center 27.06.2011 Einführung in ExtJS 3

4. Exkurs SASS „Meta-Sprache“ für CSS Variablen Verschachtelte Selektoren Styles vererben 27.06.2011 Einführung in ExtJS 4

5. Components 27.06.2011 Einführung in ExtJS 5 Data Component Layouts Utilities

6. Store 27.06.2011 Einführung in ExtJS 6 Model Store Reader Proxy Writer

7. Beispiel: Grid 27.06.2011 Einführung in ExtJS 7

8. Beispiel: Grid 27.06.2011 Einführung in ExtJS 8 Model Entry Store Proxy Type: ajax Url: /getData Reader Type: JSON Grid Layout Renderer

9. Model: Entry Ext.define('Entry', { extend: 'Ext.data.Model', fields: [ {name: 'date', type: 'date', dateFormat: 'd/m/Y'}, {name: 'from', type: 'date', dateFormat: 'H:i'}, {name: 'description', type: 'string'}, {name: 'ticket', type: 'string'}, {name: 'booked', type: 'bool'} ] }); 27.06.2011 Einführung in ExtJS 9 C C C

10. Store varstore= Ext.create('Ext.data.Store', { model: 'Entry', proxy: { type: 'ajax', url: 'getData', reader: { type: 'json' } } }); 27.06.2011 Einführung in ExtJS 10 C C C C

11. View vargrid= Ext.create('Ext.grid.Panel', { store: store, columns: [{ header: 'Id', dataIndex: 'id', hidden: true }, { header: 'Datum', dataIndex: 'date', renderer: formatDate, width: 75 } }); 27.06.2011 Einführung in ExtJS 11 C C

12. Beispiel: Chart 27.06.2011 Einführung in ExtJS 12

13. Beispiel: Chart 27.06.2011 Einführung in ExtJS 13 Model Store Proxy Reader Chart Layout Renderer

14. Chart: Axes 27.06.2011 Einführung in ExtJS 14

15. Chart: Series 27.06.2011 Einführung in ExtJS 15

16. View Ext.create('Ext.chart.Chart', { store: store, axes: [ { title: 'Temperature', type: 'Numeric', position: 'left', fields: ['temperature'] } … 27.06.2011 Einführung in ExtJS 16 C C

17. View … series: [ { type: 'line', xField: 'date', yField: 'temperature' } ] }); 27.06.2011 Einführung in ExtJS 17 C C

18. Links Samples & Demoshttp://www.sencha.com/products/extjs/examples/ Learning Centerhttp://www.sencha.com/learn/ Documentationhttp://docs.sencha.com/ext-js/4-0/ SASShttp://sass-lang.com/ 27.06.2011 Einführung in ExtJS 18