Comment définir le rendu d'élément pour ListView dans ext-gwt?

Question

J'ai un ListView dans ext-gwt et j'y ajoute des données personnalisées. Comment puis-je définir un rendu d'élément sur le ListView? En ce moment, chaque fois qu'un élément est ajouté, il y a juste une petite ligne représentant chaque entrée dans la vue.

Voici mon code de base:

import com.extjs.gxt.ui.client.store.ListStore; 
import com.extjs.gxt.ui.client.widget.ListView; 
import com.foo.bar.FooModelData; 


private final ListStore<FooModelData> listStore = 
    new ListStore<FooModelData>(); 
private final ListView<FooModelData> listView = 
    new ListView<FooModelData>(); 

public initializeView() 
{ 
    listView.setStore(listStore); 
    listView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE); 
} 

public void addItem(FooModelData data) { 
    listStore.add(data); 
} 


public class FooModelData extends BaseModel 
{ 
    public ModelDataInstance(Foo foo, String style) 
    { 
     setFoo(foo); 
     setStyle(style); 
    } 

    public String getStyle() 
    { 
     return get("style"); 
    } 

    public Foo getFoo() 
    { 
     return (Foo) get("foo"); 
    } 

    public void setStyle(String style) 
    { 
     set("style", style); 
    } 

    public void setFoo(Foo foo) 
    { 
     set("foo", foo); 
    } 

} 

Merci pour toute l'aide!

Answer 1

GXT utilise une implémentation de modèle. En utilisant une version simplifiée de l'exemple de l'explorateur Sencha vous pouvez utiliser vos données comme suit (foo.name suppose foo est aussi un modèle:

public initializeView() 
{ 
listView.setStore(listStore); 
listView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE); 
listView.setTemplate(getTemplate()); 
} 

private native String getTemplate() /*-{ 
return ['<tpl for=".">', 
'<div class="{style}">{foo.name}</div>', 
'</tpl>', 
'<div class="x-clear"></div>'].join(""); 
}-*/;