Rendering cella Grid GXT3

Question

Come è possibile eseguire il rendering di una colonna della griglia come colonna della griglia multipla utilizzando le griglie GXT 3.

es

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

Si può fare il facile e nel modo più duro.

Il facile:

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

L'(ma molto meglio) modo più duro:

1) Creare personalizzato GridAppearance da utilizzare al posto di default dal tema:

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

2) Copia /theme-you-use/client/grid/Grid.css a YourGrid.css e mettilo nella stessa cartella in cui hai creato la classe YourGridAppearance. Ecco un esempio in base a Grey tema:

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

La parte più importante di esso è questo:

.cellInner { 
    white-space: normal; 
} 

3) Sostituire aspetto della griglia di default con la vostra abitudine uno. Per fare ciò è necessario aggiungere le seguenti righe a 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>