2013-02-28 63 views
0

我在GWT 2.5中有一個CellList。每個單元格項都是基於AbstractCell的類,並在UiBinder文件中定義。如何在單個項目的基礎上設置CellList項目的樣式?

如何爲每個項目設置不同的樣式?我希望有些人會以「殘疾人」的風格出現,其他人則以「積極」的風格出現。

這是我的.ui.xml文件中的內容。我沒有包含樣式定義或UiBinder腳手架。

<div class="{style.contact}"> 
    <div> 
     <div> 
      <img class="{style.photo}" src="{photo}"/> 
     </div> 
     <div class="{style.names}"> 
      <div> 
       <p><ui:text from="{name}"/></p> 
       <p><ui:text from="{jobTitle}"/></p> 
       <p><ui:text from="{company}"/></p> 
      </div> 
     </div> 
    </div> 
</div> 

回答

1

使用CellList.getRowElement()

cellList.getRowElement(3).addClassName("css-disabled"); 
cellList.getRowElement(4).addClassName("css-active"); 
+0

嘗試建議的方法並發現它沒有工作後,它看起來像GWT CellList擁有它自己的特殊API來處理樣式更改。 – Carl 2013-03-19 16:07:56

+0

@Carl試試把重要!在風格。 – texasbruce 2013-03-19 16:11:15

+0

我試過了!重要但沒有效果。 「addClassName()」與正在呈現的html斷開連接。當我看起來使用開發工具欄時,我甚至找不到任何類名爲「css-disabled」的元素。 – Carl 2013-03-20 17:05:29

1

可以實現通過重寫你的的渲染()方法如下添加樣式的名稱 -

@Override 
public void render(com.google.gwt.cell.client.Cell.Context context, T value, SafeHtmlBuilder sb) 
{ 
    if(disable condition met) 
    { 
      // Apply disabled style 
     sb.appendHtmlConstant("<div class='css-style-disabled' >"+ value+" </div>" 
    } 
    else 
    { 
      super.render(context, value, sb); 
    } 
} 

所以,加css-style-disabled類你的CSS文件來啓動它的造型。

+0

我喜歡將邏輯放在render()中的想法,但在這種情況下,我需要擴展DTO以包含禁用狀態,因爲這是我的應用中常用的類,所以我寧願避免這種狀態。 – Carl 2013-03-02 05:21:16

+0

我從此採用UiBinder來定義UI,因此這個答案不再適用於這種方法。 – Carl 2013-03-19 10:29:03

0

texasbruce的回答是解決方案,但如果你使用的是ListDataProvider那麼你就需要這樣修改,以addClassName(任何呼叫的時間):

new Timer() { 
    @Override 
    public void run() { 
     << call cellList.getRowElement(0).addClassName("css-disabled") here >>; 
    } 
}.schedule(1); 
相關問題