GXT3 Rasterzellen-Rendering

Question

Wie kann ich eine Rasterspalte als mehrzeilige Rasterspalte mit GXT 3 Rastern rendern.

beispiels

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

Sie tun können, dass die einfach und die harte Weise.

Die einfach:

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

Die harte (aber viel besser) Art und Weise:

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) Erstellen von benutzerdefinierten GridAppearance anstelle von Standard eines von Ihrem Thema verwendet werden

2) Kopieren Sie /theme-you-use/client/grid/Grid.css zu YourGrid.css und legen Sie es in den gleichen Ordner, in dem Sie YourGridAppearance Klasse erstellt haben. Hier ist ein Beispiel, basierend auf Grau Thema:

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

Der wichtigste Teil davon dies ist:

.cellInner { 
    white-space: normal; 
} 

3) ersetzen Standardraster Aussehen mit Ihrem eigenen ein. Dazu müssen Sie die folgenden Zeilen hinzufügen: your-project.gwt.xml: