如何在GWT GXT中在网格列中显示多个图像

我正在使用图标渲染器在网格列中显示我的图像。但是，根据用户搜索结果，我希望在网格的同一列中显示1个或多个图标。例如，如果result low有一个紧急标志，等等。我正在使用GridCellRenderer类来渲染一个图像，但是需要关于如何显示多个图像的帮助。谢谢你的阅读和帮助

---

Murad.

您使用的是哪个版本的GXT？ 如果您使用的是2.X版本-请参阅

---

如果您使用的是3.X版本，请创建一个用于渲染图像的自定义单元格（AbstractSafeThmlCell）。使用HTML在该单元格中添加多个图标。

来自GXT 4和GWT 2.7，假设您定义了网格列并配置了绑定，以便当前显示希望显示为不同图像（而不是字符串）的字符串值，下面的代码位演示了本机字符串显示与一个渲染图像

这是您的网格行模型，通常绑定到REST/JSON数据源，这里有“id”和“myVal”属性；我们在模型属性中构建图像资源的相对URL路径，此处为“images/*.png”：

public class MyRowModel extends JavaScriptObject {
  protected MyRowModel() {
  }
  // what makes a unique ID for GWT/GXT grid entries, not necessarily displayed
  public final native String getId()       /*-{return this.id;}-*/;
  public final native String getMyStringVal() /*-{return this.myVal;}-*/;
  public final native String getMyImagePath()  /*-{return "images/" + this.myVal + ".png";}-*/;
  ... more model properties
}

然后，在构建网格的子窗口小部件类中，您可能已经声明了绑定（对行模型的网格访问），然后创建了网格，稍后将其放入布局中：

public class MyPanel extends Widget implements IsWidget {
  protected com.sencha.gxt.data.shared.ListStore<MyRowModel> store;

  interface MyGridRow extends com.sencha.gxt.data.shared.PropertyAccess<MyRowModel> {
    @Editor.Path("id")
    ModelKeyProvider<MyRowModel> key(); // unique key for each row, here mapped to 'id'
    ValueProvider<MyRowModel, String> myStringVal();
    ValueProvider<MyRowModel, String> myImagePath();
    ... more bindings...
  }

  private static final MyGridRow myRow = GWT.create(MyGridRow.class);

  com.sencha.gxt.widget.core.client.grid.Grid<MyRowModel> createGrid() {
    IdentityValueProvider<MyRowModel> identityValueProvider = new IdentityValueProvider<>();
    ColumnConfig<MyRowModel, String> stringColumn = new ColumnConfig<>(myRow.myStringVal(), 50, "Text");
    ColumnConfig<MyRowModel, String> imageColumn = new ColumnConfig<>(myRow.myImagePath(), 50, "Image");
    ... more column configs ...
    List<ColumnConfig<MyRowModel, ?>> columns = new ArrayList<>();
    columns.add(stringColumn);
    columns.add(imageColumn);
    imageColumn.setCell(new ImageCell()); // the trick is here!
    ...
    final com.sencha.gxt.widget.core.client.grid.Grid<MyRowModel> grid = new Grid<>(store, new ColumnModel<>(columns), new GridView<MyRowModel>(new Css3GridAppearance()));
    ... add sorting, filters, coloring to your grid
    return grid;
  }

  ... more logic to layout the created grid ...
}

public类MyPanel扩展小部件实现IsWidget{
受保护的com.sencha.gxt.data.shared.ListStore存储；
接口MyGridRow扩展com.sencha.gxt.data.shared.PropertyAccess{
@编辑器路径（“id”）
ModelKeyProvider key（）；//每行的唯一键，此处映射到“id”
ValueProvider myStringVal（）；
ValueProvider myImagePath（）；
…更多绑定。。。
}
私有静态final MyGridRow myRow=GWT.create（MyGridRow.class）；
com.sencha.gxt.widget.core.client.grid.grid createGrid（）文件{
IdentityValueProvider IdentityValueProvider=新IdentityValueProvider（）；
ColumnConfig stringColumn=newColumnConfig（myRow.myStringVal（），50，“Text”）；
ColumnConfig imageColumn=newColumnConfig（myRow.myImagePath（），50，“Image”）；
…更多列配置。。。
列表列=新的ArrayList（）；
columns.add（stringColumn）；
columns.add（imageColumn）；
imageColumn.setCell（newImageCell（））；//诀窍就在这里！
...
final com.sencha.gxt.widget.core.client.grid.grid grid=new grid（存储、新ColumnModel（列）、新GridView（新Css3GridAppearance（））；
…在网格中添加排序、过滤器和颜色
返回网格；
}
…布局所创建网格的更多逻辑。。。
}