gwt - GWT GXT でグリッド列に複数の画像を表示する方法

Question

IconRenderer を使用して、画像をグリッド列に表示しています。ただし、ユーザーの検索結果に基づいて、グリッドの同じ列に 1 つ以上のアイコンを表示したいと考えています。たとえば、結果の低に緊急フラグがある場合などです。GridCellRenderer クラスを使用して 1 つの画像を既にレンダリングしていますが、複数を表示する方法について助けが必要です。読んで助けてくれてありがとう。

ムラド。

Answer 1

GWT 2.7 を使用する GXT 4 から、文字列ではなく別の画像として表示したい文字列値を現在表示するように、グリッド列を定義し、バインディングを構成したと仮定すると、以下のコードのビットは、ネイティブ文字列表示と 1 つのレンダリングを示しています。画像。

これはグリッドの行モデルで、通常は 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 ...
}