Einführung in ExtJS4.0<br />
Was ist ExtJS?<br />Ext JS ist ein clientseitiges JavaScript- bzw. Ajax-Framework für interaktive Webanwendungen. […] In e...
Was bietet mir ExtJS?<br />viele vorgefertigte Komponenten<br />Core & Community<br />schnelle Ergebnisse<br />einfaches T...
Exkurs SASS<br />„Meta-Sprache“ für CSS<br />Variablen<br />Verschachtelte Selektoren<br />Styles vererben<br />27.06.2011...
Components<br />27.06.2011<br />Einführung in ExtJS<br />5<br />Data<br />Component<br />Layouts<br />Utilities<br />
Store<br />27.06.2011<br />Einführung in ExtJS<br />6<br />Model<br />Store<br />Reader<br />Proxy<br />Writer<br />
Beispiel: Grid<br />27.06.2011<br />Einführung in ExtJS<br />7<br />
Beispiel: Grid<br />27.06.2011<br />Einführung in ExtJS<br />8<br />Model<br />Entry<br />Store<br />Proxy<br />Type: ajax...
Model: Entry<br />Ext.define('Entry', {<br />extend: 'Ext.data.Model',<br />fields: [<br />		{name: 'date', type: 'date', ...
Store<br />varstore= Ext.create('Ext.data.Store', {<br />model: 'Entry',<br />proxy: {<br />		type: 'ajax',<br />		url: 'g...
View<br />vargrid= Ext.create('Ext.grid.Panel', {<br />store: store,<br />columns: [{<br />header: 'Id',<br />dataIndex: '...
Beispiel: Chart<br />27.06.2011<br />Einführung in ExtJS<br />12<br />
Beispiel: Chart<br />27.06.2011<br />Einführung in ExtJS<br />13<br />Model<br />Store<br />Proxy<br />Reader<br />Chart<b...
Chart: Axes<br />27.06.2011<br />Einführung in ExtJS<br />14<br />
Chart: Series<br />27.06.2011<br />Einführung in ExtJS<br />15<br />
View<br />Ext.create('Ext.chart.Chart', {<br />store: store,<br />axes: [<br />		{<br />			title: 'Temperature',<br />			t...
View<br />	…<br />series: [<br />		{<br />			type: 'line',<br />xField: 'date',<br />yField: 'temperature'<br />		}<br />	...
Upcoming SlideShare
Loading in …5
×

Einführung in ExtJS 4.0

2,273 views

Published on

Published in: Lifestyle, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,273
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Einführung in ExtJS 4.0

  1. 1. Einführung in ExtJS4.0<br />
  2. 2. Was ist ExtJS?<br />Ext JS ist ein clientseitiges JavaScript- bzw. Ajax-Framework für interaktive Webanwendungen. […] In erster Linie bietet Ext JS eine umfangreiche Sammlung von Steuerelementen.<br />http://de.wikipedia.org/wiki/Extjs<br />27.06.2011<br />Einführung in ExtJS<br />2<br />
  3. 3. Was bietet mir ExtJS?<br />viele vorgefertigte Komponenten<br />Core & Community<br />schnelle Ergebnisse<br />einfaches Theming durch SASS<br />MVC-Prinzip<br />gute Dokumentation!<br />gutes Learning-Center<br />27.06.2011<br />Einführung in ExtJS<br />3<br />
  4. 4. Exkurs SASS<br />„Meta-Sprache“ für CSS<br />Variablen<br />Verschachtelte Selektoren<br />Styles vererben<br />27.06.2011<br />Einführung in ExtJS<br />4<br />
  5. 5. Components<br />27.06.2011<br />Einführung in ExtJS<br />5<br />Data<br />Component<br />Layouts<br />Utilities<br />
  6. 6. Store<br />27.06.2011<br />Einführung in ExtJS<br />6<br />Model<br />Store<br />Reader<br />Proxy<br />Writer<br />
  7. 7. Beispiel: Grid<br />27.06.2011<br />Einführung in ExtJS<br />7<br />
  8. 8. Beispiel: Grid<br />27.06.2011<br />Einführung in ExtJS<br />8<br />Model<br />Entry<br />Store<br />Proxy<br />Type: ajax<br />Url: /getData<br />Reader<br />Type: JSON<br />Grid<br />Layout<br />Renderer<br />
  9. 9. Model: Entry<br />Ext.define('Entry', {<br />extend: 'Ext.data.Model',<br />fields: [<br /> {name: 'date', type: 'date', dateFormat: 'd/m/Y'},<br /> {name: 'from', type: 'date', dateFormat: 'H:i'},<br /> {name: 'description', type: 'string'},<br /> {name: 'ticket', type: 'string'},<br /> {name: 'booked', type: 'bool'}<br /> ]<br />});<br />27.06.2011<br />Einführung in ExtJS<br />9<br />C<br />C<br />C<br />
  10. 10. Store<br />varstore= Ext.create('Ext.data.Store', {<br />model: 'Entry',<br />proxy: {<br /> type: 'ajax',<br /> url: 'getData',<br />reader: {<br /> type: 'json'<br /> }<br /> }<br />});<br />27.06.2011<br />Einführung in ExtJS<br />10<br />C<br />C<br />C<br />C<br />
  11. 11. View<br />vargrid= Ext.create('Ext.grid.Panel', {<br />store: store,<br />columns: [{<br />header: 'Id',<br />dataIndex: 'id',<br />hidden: true<br /> }, {<br />header: 'Datum',<br />dataIndex: 'date',<br />renderer: formatDate,<br />width: 75<br /> }<br />});<br />27.06.2011<br />Einführung in ExtJS<br />11<br />C<br />C<br />
  12. 12. Beispiel: Chart<br />27.06.2011<br />Einführung in ExtJS<br />12<br />
  13. 13. Beispiel: Chart<br />27.06.2011<br />Einführung in ExtJS<br />13<br />Model<br />Store<br />Proxy<br />Reader<br />Chart<br />Layout<br />Renderer<br />
  14. 14. Chart: Axes<br />27.06.2011<br />Einführung in ExtJS<br />14<br />
  15. 15. Chart: Series<br />27.06.2011<br />Einführung in ExtJS<br />15<br />
  16. 16. View<br />Ext.create('Ext.chart.Chart', {<br />store: store,<br />axes: [<br /> {<br /> title: 'Temperature',<br /> type: 'Numeric',<br />position: 'left',<br />fields: ['temperature']<br /> }<br /> …<br />27.06.2011<br />Einführung in ExtJS<br />16<br />C<br />C<br />
  17. 17. View<br /> …<br />series: [<br /> {<br /> type: 'line',<br />xField: 'date',<br />yField: 'temperature'<br /> }<br /> ]<br />});<br />27.06.2011<br />Einführung in ExtJS<br />17<br />C<br />C<br />
  18. 18. Links<br />Samples & Demoshttp://www.sencha.com/products/extjs/examples/<br />Learning Centerhttp://www.sencha.com/learn/<br />Documentationhttp://docs.sencha.com/ext-js/4-0/<br />SASShttp://sass-lang.com/<br />27.06.2011<br />Einführung in ExtJS<br />18<br />

×