0

我正在使用 IconRenderer 在网格列中显示我的图像。但是，根据用户搜索结果，我想在网格的同一列中显示 1 个或多个图标。例如，如果结果低有一个紧急标志等。我正在使用 GridCellRenderer 类来渲染一个图像，但在如何显示多个图像方面需要帮助。感谢阅读和帮助。

穆拉德。

4

2 回答 2

0

您使用的是哪个版本的 GXT？如果您使用的是 2.X 版本 - 请参阅Sencha 论坛
如果您使用的是 3.X 版本 - 创建一个呈现图像的自定义单元格（AbstractSafeHtmlCell）。使用 HTML 在该单元格中添加多个图标。

于 2013-11-29T08:45:03.030 回答
0

从 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
}

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

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 ...
}
于 2016-12-27T09:55:03.457 回答