• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Einführung in ExtJS 4.0
 

Einführung in ExtJS 4.0

on

  • 2,144 views

 

Statistics

Views

Total Views
2,144
Views on SlideShare
2,134
Embed Views
10

Actions

Likes
0
Downloads
0
Comments
0

4 Embeds 10

http://devdu.de 5
http://www.devdu.de 3
http://www.slideshare.net 1
http://marcel-meyer.net 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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

    Einführung in ExtJS 4.0 Einführung in ExtJS 4.0 Presentation Transcript

    • Einführung in ExtJS4.0
    • 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
    • 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
    • Exkurs SASS
      „Meta-Sprache“ für CSS
      Variablen
      Verschachtelte Selektoren
      Styles vererben
      27.06.2011
      Einführung in ExtJS
      4
    • Components
      27.06.2011
      Einführung in ExtJS
      5
      Data
      Component
      Layouts
      Utilities
    • Store
      27.06.2011
      Einführung in ExtJS
      6
      Model
      Store
      Reader
      Proxy
      Writer
    • Beispiel: Grid
      27.06.2011
      Einführung in ExtJS
      7
    • Beispiel: Grid
      27.06.2011
      Einführung in ExtJS
      8
      Model
      Entry
      Store
      Proxy
      Type: ajax
      Url: /getData
      Reader
      Type: JSON
      Grid
      Layout
      Renderer
    • 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
    • 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
    • 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
    • Beispiel: Chart
      27.06.2011
      Einführung in ExtJS
      12
    • Beispiel: Chart
      27.06.2011
      Einführung in ExtJS
      13
      Model
      Store
      Proxy
      Reader
      Chart
      Layout
      Renderer
    • Chart: Axes
      27.06.2011
      Einführung in ExtJS
      14
    • Chart: Series
      27.06.2011
      Einführung in ExtJS
      15
    • 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
    • View

      series: [
      {
      type: 'line',
      xField: 'date',
      yField: 'temperature'
      }
      ]
      });
      27.06.2011
      Einführung in ExtJS
      17
      C
      C
    • 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