GXT3グリッドセルレンダリング

Question

GXT 3グリッドを使用してグリッドカラムをマルチライングリッドカラムとしてレンダリングするにはどうすればよいですか？

例えば

ColumnConfig<ExceptionEntry, String> name = new ColumnConfig<ExceptionEntry, String>(props.name(), 50, "Name"); 
name.setColumnStyle(new SafeStyles(){ 
     @Override 
     public String asString() { 
      return // what styles to use for multiline rendering; 
     } 
    }); 

name.setCell(new AbstractCell<String>() { 
    @Override 
     public void render(com.google.gwt.cell.client.Cell.Context context, 
       String value, SafeHtmlBuilder sb) { 
      ??? what needs to be done to render the column as multiline column 
     } 
    }); 

Answer 1

あなたは、簡単かつハードな方法ということを行うことができます。

簡単1：

name.setCell(new AbstractCell<String>() { 
    @Override 
    public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) { 
     sb.appendHtmlConstant("<div style=\"white-space: normal;\" >" + value + "</div>"); 
    } 
}); 

ハード（しかし、はるかに良い）方法：

import com.google.gwt.core.client.GWT; 
import com.sencha.gxt.theme.base.client.grid.GridBaseAppearance; 

public class YourGridAppearance extends GridBaseAppearance { 

    public interface YourGridStyle extends GridStyle { 
    } 

    public interface YourGridResources extends GridResources { 

    @Source({ "com/sencha/gxt/theme/base/client/grid/Grid.css", "YourGrid.css" }) 
    @Override 
    YourGridStyle css(); 
    } 

    public YourGridAppearance() { 
    this(GWT.<YourGridResources> create(YourGridResources.class)); 
    } 

    public YourGridAppearance(YourGridResources resources) { 
    super(resources); 
    } 
} 

：

1）カスタムGridAppearanceを作成しますが、あなたのテーマからデフォルトの代わりに使用します

2）をYourGrid.cssにコピーし、YourGridAppearanceクラスを作成したのと同じフォルダに入れます。ここでグレーテーマに基づいた例である：

@CHARSET "UTF-8"; 
.rowHighlight { 
    border: 1px dotted #535353; 
} 

.rowAlt .cell { 
    background-color: #FAFAFA; 
} 

.rowOver .cell { 
    background-color: #EEEEEE; 
} 

.cell { 
    border-color: #FAFAFA #EDEDED #EDEDED; 
    border-right: 0 solid #EDEDED; 
    font: 14px tahoma,arial,verdana,sans-serif; 
} 

.cellSelected { 
    background-color: #C9C9C9 !important; 
    color: #000000; 
} 

.cellInner { 
    white-space: normal; 
    line-height: 15px; 
} 

.columnLines .cell { 
    border-right-color: #EDEDED; 
} 

.rowOver .cell,.rowOver .rowWrap { 
    border-color: #DDDDDD; 
} 

.rowWrap { 
    border-color: #FAFAFA #EDEDED #EDEDED; 
    border-right: 0 solid #EDEDED; 
    border-style: solid; 
    border-width: 1px; 
    overflow: hidden; 
} 

.rowSelected .cell,.rowSelected .rowWrap { 
    background-color: #DFE8F6 !important; 
    border-color: #A3BAE9; 
} 

.footer { 
    background: #F7F7F7 none repeat scroll 0 0; 
    border-top: 1px solid #DDDDDD; 
    border-bottom: 1px solid #DDDDDD; 
    display: block; 
    overflow: hidden; 
    position: relative; 
} 

それの最も重要な部分はこの1つである：

.cellInner { 
    white-space: normal; 
} 

3）カスタム1でデフォルトのグリッドの外観を交換してください。これを行うには、your-project.gwt.xmlに次の行を追加する必要があります。

<replace-with class="package.name.of.your.custom.theme.class.YourGridAppearance"> 
    <when-type-is class="com.sencha.gxt.widget.core.client.grid.GridView.GridAppearance" /> 
</replace-with>