2012-01-25 12 views
2

私はツリーパネルを持っており、特定の場所にアニメーションスクロールをしようとしています。を移動しません、スクロールバーで正しい場所、が、「スライダー」にExtJS 4.0.7 scrollTo()はスクロールしますが、スクロールバーのスライダーは移動しませんか?

myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/); 

ビューをスクロール:私はこのような何かをやっています。なぜどんなアイデア?

追加情報:代わりに次のようにすると、スクロールバーのスライダが正しく移動します(もちろんscroll()はアニメーションをサポートしません).scrollTo()を使用すると、スクロール):

myTreePanel.getView().getEl().scroll('down', yDiff); 

ありがとうございました!

答えて

3

@MoleculeManがカスタムスクロールバー(ExtJSが4.0.xでは使用しますが、4.1では使用しない)を無効にすることの提案になります。この後、myTreePanel.getView()。getEl()。scrollTo( 'top'、yCoord、true)を呼び出すと、すべてが正常に動作します。スクロールがアニメーション化され、スクロールバーが移動します。唯一の問題は、上下の矢印キーを使用してツリーを移動すると、ビューがスクロールする機能が無効になっているように見えることです。

それは非常にエレガントではないですが、回避策、私が使用するつもりだがこれです:これは、所定の場所に「ジャンプ」の代わりに、スムーズに移動するスクロールバーの化粧品の欠点を持っている

// Animated scroll of tree view 
myTreePanel.getView().getEl().scrollTo('top', yCoord, true); 

// Wait 300ms then sync the scroll bar with the tree view 
setTimeout(function() { 
    myTreePanel.setScrollTop(yCoord); 
}, 300); 

アニメーションが、アップ/ダウンキーのスクロールを壊さないという利点があります。また、設定パラメータを変更したり、ツリービューのスタイルをオーバーライドしたりする必要がないので、ExtJS 4.1にアップグレードしても機能すると仮定しています(つまり、setScrollTop()へのタイマー呼び出しは不要ですが、何か)。

setScrollTop()を呼び出すとスクロールバーが移動するだけでなく、ビューがその位置に「ジャンプ」します。したがって、アニメーションが終了するまでタイマーが起動しないようにする必要があります。

var scrollToRowNum = 5; 
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]); 
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1]; 

// Animated scroll of tree view 
myTreePanel.getView().getEl().scrollTo('top', yCoord, true); 

// Check every 10ms to see if animation is done, then sync scrollbar 
var timerId = setInterval(function() { 
    if(myTreePanel.isTreeElementWithinVisibleArea(scrollToEl)) { 
     clearInterval(timerId); 
     myTreePanel.setScrollTop(yCoord); 
    } 
}, 10); 
:先の行は、その後setScrollTop()を呼び出すのではなく、常に時間のいくつかのハードコーディングされた金額を待ちタイマーを使用して、表示されている場合、私は実際に10msごとにポーリングして参照するためにいくつかのカスタムコードを使用しています

isTreeElementWithinVisibleArea()関数は、要素の現在のY座標(絶対)がツリービューボックスの上端と下端の間にあるかどうかを調べるだけです。

2

驚くべきことではありません。彼らはtheir own scrollbarを使用します。正しいコードは、

myTreePanel.verticalScroller.setScrollTop(yCoord); 

ですが、アニメーションもサポートしていません。だから私はhereを記述して元のコードを使用してカスタムスクロールバーを削除することをお勧めします。

関連する問題