{"id":321,"date":"2009-05-19T19:30:00","date_gmt":"2009-05-19T19:30:00","guid":{"rendered":"http:\/\/www.tutego.de\/blog\/javainsel\/?p=321"},"modified":"2009-05-19T19:30:00","modified_gmt":"2009-05-19T19:30:00","slug":"ext-gwt-beispiel-einer-editierbaren-tabelle","status":"publish","type":"post","link":"https:\/\/www.tutego.de\/blog\/javainsel\/2009\/05\/ext-gwt-beispiel-einer-editierbaren-tabelle\/","title":{"rendered":"Ext GWT Beispiel einer editierbaren Tabelle"},"content":{"rendered":"

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

ListStore<BaseModel> store = new ListStore<BaseModel>(); <\/p>\n

Geben wir der Tabelle zwei Zeilen, also zwei BaseModel<\/strong>-Objekte. <\/p>\n

BaseModel c = new BaseModel();
c.set( „url“, „http:\/\/www.tutego.com\/index.html<\/a> „);
c.set( „days“, „34“);
c.set( „price“, „233“);
store.add( c ); <\/p>\n

c = new BaseModel();
c.set( „url“, „http:\/\/www.heise.de\/newsticker\/<\/a> „);
c.set( „days“, „3“);
c.set( „price“, „2553“);
store.add( c );<\/p>\n

Die BaseModel<\/strong>-Objekte beschreiben also drei Spalten.<\/p>\n

Nun sind die Daten im Speicher und die Informationen f\u00fcr die Spalten m\u00fcssen aufgebaut werden. Jede Spalte wird durch ein ColumnConfig<\/strong>-Objekt beschrieben. Die ColumnConfig<\/strong>-Objekte werden dann in einer Liste gespeichert und zur Initialisierung eines ColumnModel<\/strong>s genutzt. Ein ColumnConfig<\/strong>-Objekt bekommt Informationen wie die Breite, aber auch Editoren zugewiesen.<\/p>\n

List<ColumnConfig> configs = new ArrayList<ColumnConfig>(); <\/p>\n

TextField<String> column1TextEditor = new TextField<String>();
column1TextEditor.setAllowBlank( false );
ColumnConfig column1 = new ColumnConfig( „url“, „URL“, 400 );
column1.setEditor( new CellEditor( column1TextEditor ) );
configs.add( column1 );  <\/p>\n

ColumnConfig column2 = new ColumnConfig( „days“, „Tag(e)“, 80 );
column2.setEditor( new CellEditor( new TextField<String>() ) );
configs.add( column2 ); <\/p>\n

ColumnConfig column3 = new ColumnConfig( „price“, „Gesamtpreis“, 80 );
column3.setEditor( new CellEditor( new TextField<String>() ) );
configs.add( column3 ); <\/p>\n

ColumnModel cm = new ColumnModel( configs ); <\/p>\n

Der parametrisierte Konstruktor von ColumnConfig<\/strong> erwartet einen Schl\u00fcsselnamen, den Titel f\u00fcr den Spaltenkopf und die Breite. <\/p>\n

Jetzt kommt es zur Hautkomponente, dem EditorGrid<\/strong>. Er ben\u00f6tigt drei Informationen: Die Tabellendaten (der ListStore store), die Spaltendaten (ColumnModel cm) und als generische Angabe der Datentyp der Modellelemente. <\/p>\n

EditorGrid<BaseModel> grid = new EditorGrid<BaseModel>( store, cm ); <\/p>\n

Die Komponenten wird nun wie jede andere auf den Container gesetzt. <\/p>\n

panel.add( grid ); <\/p>\n

Zugriff auf die Daten liefert store.getModels(). M\u00f6chte man durch alle Zeilen laufen, erledigt dies einfach das erweiterte for: <\/p>\n

for ( BaseModel model :store.getModels() )
  \u2026<\/p>\n","protected":false},"excerpt":{"rendered":"

Die Daten einer Tabelle liegen zeilenweise in einem ListStore. Die ListStore wird mit dem generischen Typ parametrisiert, den das Modell speichern soll. Es k\u00f6nnen 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[16,15],"tags":[],"class_list":["post-321","post","type-post","status-publish","format-standard","hentry","category-gwt","category-web-frameworks"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":0,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/321\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/media?parent=321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/categories?post=321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/tags?post=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}