trainings

View on GitHub

Erste ExtJS Anwendung

Kopieren Sie uebungen/template.html nach uebungen/extjs.html.

Fügen Sie die ExtJS-Biblothek und die Style-Definitionen hinzu.

<!-- include a CSS stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/resources/theme-triton-all.css" type="text/css" />

<!-- include an external JavaScript file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>

Fügen Sie den folgen Code-Schnipsel im <body>-Tag hinzu.

 <script>
    Ext.onReady(function() {
      var win = Ext.create('Ext.window.Window', {
        id: "meins",
        width: 200,
        height: 200,
        title: 'ExtJS …',
        html: '… is easy!'
      });
      win.show();
    });
  </script>

Wenn Sie extjs.html im Browser aufrufen, sollten Sie ein Ext.window.Window sehen!

Experimentieren mit der ersten ExtJS Anwendung

Öffnen Sie die Konsole in den Developer Tools/DevTools. Setzen Sie den title mittels Ext.getCmp("meins") neu.

Erste Karte

<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css" />
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>

<script src="https://geoext.github.io/geoext3/v3.0.0/GeoExt.js"></script>

<link rel="stylesheet" href="https://geoext.github.io/geoext3/v3.0.0/resources/css/gx-popup.css" type="text/css" />

layout: 'fit',
items: [
  Ext.create('GeoExt.component.Map', {
    map: new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([7.013056, 51.450833]),
        zoom: 12
      })
    })
  })
]

Zusatzaufgaben 1

Map (Viewport)

Schauen Sie sich das Beispiel und den Quelltext in beispiele/viewport.html genau an.

Zusatzaufgaben zu beispiel/viewport.html

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/viewport_aufgaben.html

Konfiguration des OpenLayers-Teils

Im obigen Beispiel wurde eine Instanz von ol.Map geschaffen und an GeoExt.component.Map übergeben. Wird die Instanz von ol.Map anders konfiguriert, werden diese Änderung in der eigentlich Applikation beeinflussen.

Ändern Sie die folgenden Aspekte der OpenLayers Karte:

Konfiguration des GeoExt-Teils

Konfiguration des ExtJS-Teils

Ändern Sie folgende Aspekte der ExtJS Komponenten:

Motivation

https://bjoernschilberg.github.io/trainings/geoext/beispiele/final.html

LayerTree

Einen LayerTree vorbereiten

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/layertree1.html

Kopieren Sie sich die Datei beispiele/template.html nach layertree.html.

var vp = Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [
    mapComponent
  ]
});

var mapComponent = Ext.create('GeoExt.component.Map', {
  map: map,
  region: 'center'
});

var layerTreePanel = Ext.create('Ext.panel.Panel', {
  title: 'Kartenebenen',
  width: 300,
  region: 'west'
});

var vp = Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [
    mapComponent,
    layerTreePanel
  ]
});

Einen LayerTree erstellen

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/layertree2.html

Einen realen LayerTree erstellen

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/layertree3.html

layerGroup: /* http://openlayers.org/en/latest/apidoc/ol.Map.html#getLayerGroup */

Zusatzaufgaben 2

Feature grid

Ein Feature grid vorbereiten

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/featuregrid1.html

Ein Feature grid erstellen

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/featuregrid2.html

columns: [
  {
  text: 'Kreisname',
  dataIndex: 'Kreisname',
  flex: 3
  },
  {
  text: 'Einwohner',
  dataIndex: 'Einwohner',
  flex: 1
  },
  {
  text: 'Oberbürgermeister',
  dataIndex: 'Oberbürgermeister',
  flex: 1
  }
]

Das Feature grid um weitere Funktionalitäten erweitern

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/featuregrid3.html

{
  xtype: 'widgetcolumn',
  width: 40,
  widget: {
    xtype: 'gx_renderer'
  }
}

{
  xtype: 'widgetcolumn',
  width: 40,
  widget: {
    xtype: 'gx_renderer'
  },
  onWidgetAttach: function(column, gxRenderer, rec) {
      gxRenderer.update({
        feature: rec.getFeature(),
        symbolizers: GeoExt.component.FeatureRenderer.determineStyle(rec)
      });
  }
}

Übersichtskarte (overview map) hinzufügen

Übersichtskarte vorbereiten

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/overview1.html

var overviewPanel = Ext.create('Ext.panel.Panel', {
        title: 'Übersichtskarte',
        layout: 'fit',
        html: 'TODO',
        height: 300,
        width: 300,
        collapsible: true
      });


var vp = Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [
    mapComponent,
    // below is the new wrapping container:
    {
      xtype: 'container',
      region: 'west',
      layout: 'vbox',
      collapsible: true,
      items: [
        overviewPanel,
        layerTreePanel
      ]
    },
    featureGrid
  ]
});

Übersichtskarte einfügen

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/overview2.html

Einen anderen Layer für die Übersichtskarte definieren

Motivation: https://bjoernschilberg.github.io/trainings/geoext/beispiele/overview3.html

var overview = Ext.create('GeoExt.component.OverviewMap', {
  parentMap: map,
  layers: [
  new ol.layer.Tile({
          title: 'nw_dop20',
          source: new ol.source.TileWMS({
            url: 'https://www.wms.nrw.de/geobasis/wms_nw_dop20',
            params: {
              LAYERS: 'nw_dop20',
              TILED: true,
            }
          })
        })
  ]
});

Popup hinzufügen