如何在 GXT 3.x（来自 Sencha）中实现冻结列？Sencha 的另一款产品 Ext-JS 似乎实现了这一点，但我看不出基于 Java 的 GXT 在哪里实现了同样的功能：
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html
问问题
3929 次
2 回答
13
基本思想是您需要两个不同的滚动容器，一个带有固定列，一个带有滚动列。这些中的每一个都需要位于不同的视口中，因此标准的 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 添加更多内容。
于 2013-02-24T04:04:50.457 回答
2
该功能未在 GXT 中实现，但有一个名为The_Jackal的用户在Sencha 论坛 - Thread中针对此问题进行了解决。我还没有尝试过，但我希望它可以帮助你。
于 2013-02-20T19:20:41.103 回答