Ext.Container scrollable

Posted 2020-08-07 茗小铭

1.滚动带页面container顶部

1. var me = this,
2. scroller = me.getScrollable().getScroller();
3. scroller.scrollToTop();

2.内容不显示

原因：设置了scrollable的同时，需要设置容器在滚动方向的高度或宽度

3.container回弹：滚动一小段，松开后又回到顶部

描述：

某页面下trade-record container 组件

1. var com = Ext.Viewport.down(‘#trade-record‘);
2. var scrollView = com.getScrollable();
3. var scroller = scrollView.getScroller();

原因：

scroller的maxposition会影响scroller滑动后的位置，如果为{x:0，y:0}时，会找出回弹，给maxposition设置了值后，可以达到滑动哪儿停在哪儿的效果，但是有的时候，scroller.getSize() 和 scroller.getContainerSize() 会出现相等的情况，也就是maxposition为0，0 的情况，就会会弹回去，所以我们可以根据具体情况手动的设置maxposition的值。

1. scroller.getMaxPosition().y =
2.     scroller.getSize() - scroller.getContainerSize();

scroller的maxposition在触发maxpositionchange事件时计算。

解决方案：

监听maxpositionchange事件，手动计算maxposition。

1. eg:
2. setScrollMaxPosition: function(data){
3.         var me = this,
4.             l = data.transaction.length,
5.             itemHeight = 2*20*HEIGHT_SCALE,
6.             scroller = me.down(‘#trade-record‘).getScrollable().getScroller();
7.         scroller.maxPosition = {
8.             x: scroller.maxPosition.x,
9.             y: l*itemHeight
10.         };
11.         scroller.on(‘maxpositionchange‘, function(s, maxPosition){
12.             scroller.maxPosition = {
13.                 x: maxPosition.x,
14.                 y: l*itemHeight
15.             };
16.         });
17.     },