Question

如何在GXT 3.x（来自Sencha）中实现冻结列？来自Sencha的另一个产品Ext-JS似乎实现了这个，但我看不出基于Java的GXT实现同样的东西：

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html

Answer 1

基本思想是你需要两个不同的滚动容器，一个带有固定列，另一个带有滚动列。其中每一个都需要在一个不同的视口中，因此标准的Grid / GridView不能很好地处理它 - 它们对滚动应该如何表现做出假设，因此简单地对一个或两个进行子类化很可能是相当复杂的。

相反，您可以构建两个网格，一个用于锁定列，一个用于滚动列。每个人都可以处理他们自己的ColumnConfig类，绘制标题和行，并链接到同一个ListStore以确保他们的数据同步 - 商店中的更改将传递给同时监听网格。

为了获得完整的效果，需要一些额外的布线：

链接滚动。聆听每个网格中的BodyScrollEvent，并将另一个网格滚动到同一个地方（仅更改top，而不是left，因为您不希望控制另一个网格。
大小调整是第二大部分 - 两个网格都需要它们的可滚动高度相同，但是水平滚动在实际显示滚动条时底部需要一个缓冲区。通常，Grid会根据其父级的指令进行调整，但有时您会直接调整Grid的大小 - 在这种情况下，不需要执行此步骤，只需稍微改变两个网格的大小。否则，您需要构建布局以正确配置它。
最后，锁定的列需要隐藏其垂直滚动条 - 用户无需看到两个垂直滚动条。

这涵盖了基本用例，但不涉及替代GridView实现 - GroupingView之类的事情，子类需要链接扩展（并隐藏组标题，以便它们不会出现两次，再加上当下半部分向侧面滚动时，组行不应该被拆分这一事实，TreeGridView和TreeGrid将需要链接扩展节点并隐藏树+/-图标从第二个网格。

以下是应用于http://www.sencha.com/examples/#ExamplePlace:basicgrid的基本网格示例的这一基本修改集。为了避免混淆问题，我删除了该网格中的许多其他功能，例如工具提示和更改选择模型：

public class GridExample implements IsWidget, EntryPoint {
  private static final StockProperties props = GWT.create(StockProperties.class);

  private ContentPanel root;

  @Override
  public Widget asWidget() {
    if (root == null) {
      final NumberFormat number = NumberFormat.getFormat("0.00");

      ColumnConfig<Stock, String> nameCol = new ColumnConfig<Stock, String>(props.name(), 50, SafeHtmlUtils.fromTrustedString("<b>Company</b>"));

      ColumnConfig<Stock, String> symbolCol = new ColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
      ColumnConfig<Stock, Double> lastCol = new ColumnConfig<Stock, Double>(props.last(), 75, "Last");

      ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
      changeCol.setCell(new AbstractCell<Double>() {

        @Override
        public void render(Context context, Double value, SafeHtmlBuilder sb) {
          String style = "style='color: " + (value < 0 ? "red" : "green") + "'";
          String v = number.format(value);
          sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
        }
      });

      ColumnConfig<Stock, Date> lastTransCol = new ColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");
      lastTransCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy")));

      List<ColumnConfig<Stock, ?>> l = new ArrayList<ColumnConfig<Stock, ?>>();
      //Remove name from main set of columns
      //      l.add(nameCol);
      l.add(symbolCol);
      l.add(lastCol);
      l.add(changeCol);
      l.add(lastTransCol);

      //create two column models, one for the locked section
      ColumnModel<Stock> lockedCm = new ColumnModel<Stock>(Collections.<ColumnConfig<Stock, ?>>singletonList(nameCol));
      ColumnModel<Stock> cm = new ColumnModel<Stock>(l);

      ListStore<Stock> store = new ListStore<Stock>(props.key());
      store.addAll(TestData.getStocks());

      root = new ContentPanel();
      root.setHeadingText("Locked Grid Sample");
      root.setPixelSize(600, 300);

      final Resizable resizable = new Resizable(root, Dir.E, Dir.SE, Dir.S);
      root.addExpandHandler(new ExpandHandler() {
        @Override
        public void onExpand(ExpandEvent event) {
          resizable.setEnabled(true);
        }
      });
      root.addCollapseHandler(new CollapseHandler() {
        @Override
        public void onCollapse(CollapseEvent event) {
          resizable.setEnabled(false);
        }
      });

      //locked grid
      final Grid<Stock> lockedGrid = new Grid<Stock>(store, lockedCm) {
        @Override
        protected Size adjustSize(Size size) {
          //this is a tricky part - convince the grid to draw just slightly too wide
          //and so push the scrollbar out of sight
          return new Size(size.getWidth() + XDOM.getScrollBarWidth() - 1, size.getHeight());
        }
      };
      lockedGrid.setView(new GridView<Stock>(){{
        this.scrollOffset=0;
      }});
      //require columns to always fit, preventing scrollbar
      lockedGrid.getView().setForceFit(true);

      //main grid, with horiz scrollbar
      final Grid<Stock> grid = new Grid<Stock>(store, cm);
      //don't want this feature, want to encourage horizontal scrollbars
      //      grid.getView().setAutoExpandColumn(nameCol);
      grid.getView().setStripeRows(true);
      grid.getView().setColumnLines(true);
      grid.setBorders(false);

      grid.setColumnReordering(true);
      grid.setStateful(true);
      grid.setStateId("gridExample");

      //link scrolling
      lockedGrid.addBodyScrollHandler(new BodyScrollHandler() {
        @Override
        public void onBodyScroll(BodyScrollEvent event) {
          grid.getView().getScroller().scrollTo(ScrollDirection.TOP, event.getScrollTop());
        }
      });
      grid.addBodyScrollHandler(new BodyScrollHandler() {
        @Override
        public void onBodyScroll(BodyScrollEvent event) {
          lockedGrid.getView().getScroller().scrollTo(ScrollDirection.TOP, event.getScrollTop());
        }
      });

      HorizontalLayoutContainer gridWrapper = new HorizontalLayoutContainer();
      root.setWidget(gridWrapper);

      //add locked column, only 300px wide (in this example, use layouts to change how this works
      HorizontalLayoutData lockedColumnLayoutData = new HorizontalLayoutData(300, 1.0);

      //this is optional - without this, you get a little offset issue at the very bottom of the non-locked grid
      lockedColumnLayoutData.setMargins(new Margins(0, 0, XDOM.getScrollBarWidth(), 0));

      gridWrapper.add(lockedGrid, lockedColumnLayoutData);

      //add non-locked section, taking up all remaining width
      gridWrapper.add(grid, new HorizontalLayoutData(1.0, 1.0));
    }

    return root;
  }

  @Override
  public void onModuleLoad() {
    RootPanel.get().add(asWidget());
  }
}

有一些问题（锁定列和未锁定列之间没有线，锁定列标题菜单上下文图标稍微不合适），但它覆盖了大部分细节而没有太多麻烦，并且几乎所有细节都打开配置 - 想要锁定到底？只需移动修改 - 想要多个锁定列？只需向lockedCm添加更多内容。

Answer 2

该功能未在GXT中实施，但有一位名为 The_Jackal 的用户在Sencha Forum - Thread中针对此问题制定了解决方法。我还没试过，但我希望它可以帮到你。

GXT - Freeze grid workaround Download

如何在GXT 3.x中实现冻结列？

2 个答案: