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
基本的な考え方は、2つの異なるスクロールコンテナが必要であるということです。1つは固定列を持ち、もう1つはスクロール列を持ちます。これらはそれぞれ別個のビューポートにある必要があるため、標準のGrid / GridViewはこれではうまく機能しません。スクロールの動作を想定しているため、一方または両方をサブクラス化するだけでかなり複雑になる可能性があります。
代わりに、2つのグリッドを作成できます。1つはロックされた列用で、もう1つはスクロール列用です。それぞれが独自のColumnConfigクラスを処理してヘッダーと行を描画し、同じクラスにリンクしListStoreてデータの同期を確保します。ストアでの変更は両方のリスニンググリッドに渡されます。
完全な効果を得るには、いくつかの追加の配線が必要になります。
- リンクスクロール。
BodyScrollEvent各グリッドからを聞き、もう一方を同じ場所にスクロールします（一方を他方に制御させたくないので、変更するだけtopで、変更しないでください）。left - サイズ設定は2番目に大きな要素です。どちらのグリッドもスクロール可能な高さが同じである必要がありますが、水平方向のスクロールでは、実際にそのスクロールバーが表示されているときに下部にバッファーが必要です。通常、グリッドは親の指示に基づいてサイズを設定するように指示されますが、グリッドのサイズを直接設定する場合もあります。この場合、この手順は不要で、2つのグリッドのサイズを少し変えるだけです。それ以外の場合は、これを適切に構成するためにレイアウトを構造化する必要があります。
- 最後に、ロックされた列の垂直スクロールバーを非表示にする必要があります。ユーザーは2つの垂直スクロールバーを表示する必要はありません。
GridViewこれは基本的なユースケースをカバーしていますが、代替実装のようなものは扱いません-GroupingViewサブクラスはリンク展開する必要があります（そして、グループの見出しが2回表示されないように非表示にし、さらにグループ行がすべきではないという事実に対処する必要があります後半が横にスクロールしても分割されない）、拡張ノードをリンクし、ツリー+/-アイコンを2番目のグリッドから非表示にする必要があります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 には実装されていませんが、 Sencha Forum - Threadでこの問題の回避策を作成したThe_Jackalというユーザーがいます。まだ試していませんが、参考になれば幸いです。
于 2013-02-20T19:20:41.103 に答える