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

您可以通过简单和困难的方式来做到这一点。

简单的一个:

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

困难(但更好)的方法:

1) 创建要使用的自定义 GridAppearance，而不是主题中的默认值:

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) 将 /theme-you-use/client/grid/Grid.css 复制到 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;
}

其中最重要的部分是这个:

.cellInner {
    white-space: normal;
}

3) 将默认网格外观替换为您的自定义网格外观。为此，您必须将以下行添加到 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>