如何在GXT 3.x中實現凍結列？

Question

如何在GXT 3.x（來自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，因爲您不想控制另一個）。
• 尺寸是第二大塊 - 兩個網格需要它們的可滾動高度是相同的，但水平滾動需要在實際顯示滾動條時在底部有一個緩衝區。通常會根據網格的父指令來告知網格的大小，但有時您會直接調整網格大小 - 在這種情況下，不需要執行此步驟，只需稍微改變兩個網格的大小即可。否則，您需要構建佈局以正確配置此佈局。
• 最後，鎖定列需要隱藏它的垂直滾動條 - 用戶不需要看到兩個垂直滾動條。

這包括基本的使用情況，但不喜歡的東西替代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