gxt（ext gwt）网格和列的宽度 [英] gxt (ext gwt) Grid and column width

问题描述

我正在尝试创建一个填充 ContentPanel 的宽度的网格。网格应该有两列大小相等的跨越网格的整个宽度的列。调整浏览器窗口大小应相应地更新网格大小。我希望下面的代码能够实现这一点，但网格不会在浏览器大小调整时增长，并且第二列和网格右边缘之间存在〜15px 间隔。

有什么想法？

  public class MyGrid extends ContentPanel {
 $ b $ @Override 
 protected void onRender（Element parent，int index）{
 super.onRender（parent，index）; 
 
 setLayout（new FillLayout（））; 
 ColumnConfig c1 =新的ColumnConfig（value，value，50）; 
 ColumnConfig c2 =新的ColumnConfig（value1，value1，50）; 
 ListStore< ModelData> store = new ListStore< ModelData>（）; 
 for（int i = 0; i <10; i ++）{
 BaseModelData data = new BaseModelData（）; 
 data.set（value，value）; 
 data.set（value1，value1）; 
 store.add（data）; 
} 
网格< ModelData> grid = new Grid< ModelData>（store，new ColumnModel（Arrays.asList（new ColumnConfig [] {c1，c2}）））; 
 grid.setAutoHeight（true）; 
 grid.setAutoWidth（true）; 
 grid.getView（）。setAutoFill（true）; 
 add（grid）; 
} 
  

}

解决方案

表格右侧额外空间的原因是 grid.setAutoHeight（）。删除它，它会消失。使用浏览器调整表格大小似乎需要使用 Viewport （我不明白为什么 ContentPanel 会在上面的代码中没有网格的情况下增长）。这段代码完成了我想要做的事：

public class MyGrid extends Viewport {

@Override
protected void onRender（Element parent，int index）{
super.onRender（parent，index）;

setLayout（new FitLayout（））;
ColumnConfig c1 =新的ColumnConfig（value，value，50）;
ColumnConfig c2 =新的ColumnConfig（value1，value1，50）;
ListStore< ModelData> store = new ListStore< ModelData>（）;
for（int i = 0; i <10; i ++）{
BaseModelData data = new BaseModelData（）;
data.set（value，value）;
data.set（value1，value1）;
store.add（data）;
}
final Grid< ModelData> grid = new Grid< ModelData>（store，new ColumnModel（Arrays.asList（new ColumnConfig [] {c1，c2}）））;
grid.getView（）。setAutoFill（true）;
ContentPanel面板=新的ContentPanel（）;
panel.setLayout（new FitLayout（））;
panel.add（grid）;
add（panel）;
}
}


I am trying to create a grid that fills the width of a ContentPanel. The grid should have two columns of equal size that span the entire width of the grid. Resizing the browser window should update the grid size accordingly. I would expect the code below to accomplish this, but the grid does not grow on browser resize and there is a ~15px gap between the second column and the right edge of the grid.

Any ideas?

public class MyGrid extends ContentPanel {

@Override
protected void onRender(Element parent, int index) {
    super.onRender(parent, index);

    setLayout(new FillLayout());
    ColumnConfig c1 = new ColumnConfig("value","value", 50);
    ColumnConfig c2 = new ColumnConfig("value1","value1", 50);
    ListStore<ModelData> store = new ListStore<ModelData>();
    for (int i=0; i<10; i++) {
      BaseModelData data = new BaseModelData();
      data.set("value", "value");
      data.set("value1", "value1");
      store.add(data);
    }
    Grid<ModelData> grid = new Grid<ModelData>(store, new ColumnModel(Arrays.asList(new ColumnConfig[] {c1, c2})));
    grid.setAutoHeight(true);
    grid.setAutoWidth(true);
    grid.getView().setAutoFill(true);
    add(grid); 
}

}

解决方案

The cause of the extra space on the right of the table is grid.setAutoHeight(). Remove this and it will be gone. Getting the table to resize with the browser seems to require the use of a Viewport (I dont understand why the ContentPanel would grow without the grid in the code above). This code accomplishes what I was trying to do:

public class MyGrid extends Viewport {

  @Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);

    setLayout(new FitLayout());
    ColumnConfig c1 = new ColumnConfig("value","value", 50);
    ColumnConfig c2 = new ColumnConfig("value1","value1", 50);
    ListStore<ModelData> store = new ListStore<ModelData>();
    for (int i=0; i<10; i++) {
      BaseModelData data = new BaseModelData();
      data.set("value", "value");
      data.set("value1", "value1");
      store.add(data);
    }
    final Grid<ModelData> grid = new Grid<ModelData>(store, new ColumnModel(Arrays.asList(new ColumnConfig[] {c1, c2})));
    grid.getView().setAutoFill(true);
    ContentPanel panel = new ContentPanel();
    panel.setLayout(new FitLayout());
    panel.add(grid);
    add(panel);
  }
}

这篇关于gxt（ext gwt）网格和列的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！