Question

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

穆拉德。

Answer 1

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

Answer 2

从带有GWT 2.7的GXT 4开始，假设您定义了一个网格列并配置了绑定，以便您当前显示一个String值，您希望将其显示为不同的图像而不是字符串，下面的代码位说明了本机String显示与一个渲染图像相比。

这是您的网格行模型，通常绑定到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 ...
}

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

2 个答案: