The basic idea is that you need two different scroll containers: one with a fixed column (s), one with scrollable columns. Each of them should be in a separate viewing window, so the standard Grid / GridView does not work with this - they make assumptions about how scrolling should behave, so simply subclassing one or both will probably be quite attractive.
Instead, you can create two grids, one for locked columns, one for scrollable ones. Each of them can process its own ColumnConfig classes, draw headers and rows, and bind to the same ListStore to ensure synchronization of its data - changes to the repository will be transmitted along with both listening networks.
To get the full effect, additional wiring is required:
- Scroll binding Listen to the
BodyScrollEvent from each grid and scroll the other to the same place (changing only top , not left , since you do not want one of them to control the other). - Calibration is the second big part - both grids need their scrollable height to be the same, but horizontal scrolling requires a buffer at the bottom when this scroll bar is actually displayed. Usually a grid is reported about the size based on its parent instructions, although sometimes you sort the grid directly - in this case this step is not needed, just change the two grids a little. Otherwise, you will need to structure the layout in order to properly configure it.
- Finally, a locked column requires that its vertical scrollbar be hidden — the user does not need to see two vertical scrollbars.
This applies to the main use case, but it doesn’t have to do with things like alternative GridView implementations - GroupingView , and subclasses need to associate the extension (and hide the group headers so that they do not appear twice, plus to deal with the fact that the group line should not be divided, when the second half scrolls to the side), TreeGridView and TreeGrid need to connect the expanding nodes and hide the +/- tree icons from the second grid.
Here, this basic set of modifications applies to the basic grid example at http://www.sencha.com/examples/#ExamplePlace:basicgrid . To avoid confusion in the problem, I removed a number of other functions in this grid, such as tooltips and changing the selection model:
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, ?>>();
There are several problems (there is no line between the locked and unlocked column, the locked icon in the context menu of the column header is a little inappropriate), but it covers most of the details without much hassle and leaves almost all of this open configuration - do you want a lock at the end? Just move the changes around - want more than one locked column? just add more to lockedCm.