如何在ext-gwt中爲ListView設置項目渲染器？

Question

我在ext-gwt中有一個ListView，我正在給它添加一些自定義數據。我如何在ListView上設置項目渲染器？就目前而言，無論何時添加項目，都只有一行代表視圖中的每個條目。

這裏是我的基本代碼：

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); 
    } 

} 

感謝所有幫助！

Answer 1

GXT使用模板實現。使用 的煎茶探險示例的簡化版本，你可以按如下方式使用您的數據（foo.name假設foo是也是一種模式：

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(""); 
}-*/;