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.
ListStore<BaseModel> store = new ListStore<BaseModel>();
Geben wir der Tabelle zwei Zeilen, also zwei BaseModel-Objekte.
BaseModel c = new BaseModel();
c.set( „url“, „http://www.tutego.com/index.html „);
c.set( „days“, „34“);
c.set( „price“, „233“);
store.add( c );
c = new BaseModel();
c.set( „url“, „http://www.heise.de/newsticker/ „);
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 ColumnModels genutzt. Ein ColumnConfig-Objekt bekommt Informationen wie die Breite, aber auch Editoren zugewiesen.
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.
EditorGrid<BaseModel> grid = new EditorGrid<BaseModel>( store, cm );
Die Komponenten wird nun wie jede andere auf den Container gesetzt.
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() )
…