---
title: 'Ext GWT Beispiel einer editierbaren Tabelle'
url: 'https://tutego.de/blog/javainsel/2009/05/ext-gwt-beispiel-einer-editierbaren-tabelle'
markdown: 'https://tutego.de/blog/javainsel/2009/05/ext-gwt-beispiel-einer-editierbaren-tabelle.md'
date: '2009-05-19'
description: 'Die Daten einer Tabelle liegen zeilenweise in einem ListStore. Die ListStore wird mit dem generischen Typ parametrisiert, den das Modell speichern soll. Es können entweder eigene Beans sein, oder wir nutzen BaseModel, ein generischer Speicher von Ext GWT, der wie eine Map (oder Dyna-Bean) arbeitet.…'
taxonomy:
  category:
    - GWT
    - 'Web Frameworks'
---

# Ext GWT Beispiel einer editierbaren Tabelle

![Illustration einer tropischen Insel mit Palmen und einem hohen Berg](https://tutego.de/blog/javainsel/user/themes/tutego/images/insel-cover.jpg)# Java Blog für Programmierer

[Java Blog für Programmierer](https://tutego.de/blog/javainsel/)

## Ext GWT Beispiel einer editierbaren Tabelle

19.05.2009 · [Christian Ullenboom](https://tutego.de/blog/javainsel/author/admin/)

Die Daten einer Tabelle liegen zeilenweise in einem **ListStore**. Die **ListStore** wird mit dem generischen Typ parametrisiert, den das Modell speichern soll. Es können entweder eigene Beans sein, oder wir nutzen **BaseModel**, ein generischer Speicher von Ext GWT, der wie eine `Map` (oder Dyna-Bean) arbeitet.

```java
ListStore<BaseModel> store = new ListStore<BaseModel>();
```

Geben wir der Tabelle zwei Zeilen, also zwei **BaseModel**-Objekte.

```java
BaseModel c = new BaseModel();
c.set( "url", " ");
c.set( "days", "34");
c.set( "price", "233");
store.add( c );

c = new BaseModel();
c.set( "url", " ");
c.set( "days", "3");
c.set( "price", "2553");
store.add( c );
```

Die **BaseModel**-Objekte beschreiben also drei Spalten.

Nun sind die Daten im Speicher und die Informationen für die Spalten müssen aufgebaut werden. Jede Spalte wird durch ein **ColumnConfig**-Objekt beschrieben. Die **ColumnConfig**-Objekte werden dann in einer Liste gespeichert und zur Initialisierung eines **ColumnModel**s genutzt. Ein **ColumnConfig**-Objekt bekommt Informationen wie die Breite, aber auch Editoren zugewiesen.

```java
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

TextField<String> column1TextEditor = new TextField<String>();
column1TextEditor.setAllowBlank( false );
ColumnConfig column1 = new ColumnConfig( "url", "URL", 400 );
column1.setEditor( new CellEditor( column1TextEditor ) );
configs.add( column1 );

ColumnConfig column2 = new ColumnConfig( "days", "Tag(e)", 80 );
column2.setEditor( new CellEditor( new TextField<String>() ) );
configs.add( column2 );

ColumnConfig column3 = new ColumnConfig( "price", "Gesamtpreis", 80 );
column3.setEditor( new CellEditor( new TextField<String>() ) );
configs.add( column3 );

ColumnModel cm = new ColumnModel( configs );
```

Der parametrisierte Konstruktor von **ColumnConfig** erwartet einen Schlüsselnamen, den Titel für den Spaltenkopf und die Breite.

Jetzt kommt es zur Hautkomponente, dem **EditorGrid**. Er benötigt drei Informationen: Die Tabellendaten (der ListStore store), die Spaltendaten (ColumnModel cm) und als generische Angabe der Datentyp der Modellelemente.

```java
EditorGrid<BaseModel> grid = new EditorGrid<BaseModel>( store, cm );
```

Die Komponenten wird nun wie jede andere auf den Container gesetzt.

```java
panel.add( grid );
```

Zugriff auf die Daten liefert `store.getModels()`. Möchte man durch alle Zeilen laufen, erledigt dies einfach das erweiterte for:

```
for ( BaseModel model :store.getModels() )
```

…

Kategorien: [GWT](https://tutego.de/blog/javainsel/category/gwt/), [Web Frameworks](https://tutego.de/blog/javainsel/category/web-frameworks/)

[← Alle Beiträge](https://tutego.de/blog/javainsel/)

---

## Navigation

- Previous: [Ext GWT BeanBinding Beispiel](https://tutego.de/blog/javainsel/2009/05/ext-gwt-beanbinding-beispiel.md)
- Next: [Texte umbrechen (Word-Wrap)](https://tutego.de/blog/javainsel/2009/05/texte-umbrechen-word-wrap.md)