如何在GXT 3.x中实现冻结列？
如何在GXT 3.x（来自Sencha）中实现冻结列？ 来自Sencha的另一个产品Ext-JS似乎实现了这个，但是我看不出基于Java的GXT实现同样的东西：
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html
基本思想是您需要两个不同的滚动容器，一个包含固定列，另一个包含滚动列。 这些中的每一个都需要位于不同的视口中，因此标准的Grid / GridView不能很好地处理它们 – 它们会对滚动应该如何表现做出假设，因此简单地对一个或两个子类进行子类化可能是相当复杂的。
相反，您可以构建两个网格，一个用于锁定列，一个用于滚动列。 每个都可以处理自己的ColumnConfig类，绘制标题和行，并链接到同一个ListStore以确保它们的数据同步 – 商店中的更改将传递给两个监听网格。
为了获得完整的效果，需要一些额外的布线：
- 链接滚动。 从每个网格中收听
BodyScrollEvent，并将另一个滚动到同一个地方（仅更改top，而不是left，因为您不希望控制另一个）。 - 大小调整是第二大部分 – 两个网格都需要它们的可滚动高度相同，但水平滚动时需要在底部实际显示滚动条时使用缓冲区。 通常，Grid会根据其父级的指令进行调整，但有时您会直接调整Grid的大小 – 在这种情况下，不需要执行此步骤，只需稍微调整两个网格的大小。 否则，您需要构建布局以正确配置它。
- 最后，锁定列需要隐藏其垂直滚动条 – 用户无需查看两个垂直滚动条。
这涵盖了基本用例，但没有处理替代GridView实现之类的事情 – GroupingView和子类将需要链接扩展（并隐藏组标题，以便它们不会出现两次，再加上处理组的事实当下半部分横向滚动时，行不应该被拆分）， TreeGridView和TreeGrid将需要链接扩展节点并隐藏第二个网格中的树+/-图标。
以下是应用于http://www.sencha.com/examples/#ExamplePlace:basicgrid的基本网格示例的这一基本修改集。 为了避免混淆问题，我删除了该网格中的许多其他function，例如工具提示和更改选择模型：
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 nameCol = new ColumnConfig(props.name(), 50, SafeHtmlUtils.fromTrustedString("Company")); ColumnConfig symbolCol = new ColumnConfig(props.symbol(), 100, "Symbol"); ColumnConfig lastCol = new ColumnConfig(props.last(), 75, "Last"); ColumnConfig changeCol = new ColumnConfig(props.change(), 100, "Change"); changeCol.setCell(new AbstractCell() { @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("" + v + ""); } }); ColumnConfig lastTransCol = new ColumnConfig(props.lastTrans(), 100, "Last Updated"); lastTransCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy"))); List> l = new ArrayList>(); //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 lockedCm = new ColumnModel (Collections.>singletonList(nameCol)); ColumnModel cm = new ColumnModel (l); ListStore store = new ListStore (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 lockedGrid = new Grid (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 (){{ this.scrollOffset=0; }}); //require columns to always fit, preventing scrollbar lockedGrid.getView().setForceFit(true); //main grid, with horiz scrollbar final Grid grid = new Grid (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添加更多内容即可。
该function未在GXT中实现，但有一个名为The_Jackal的用户在Sencha论坛 – Thread中针对此问题制定了解决方法。 我还没试过，但我希望它可以帮到你。
GXT – 冻结网格解决方案下载