首页 > 代码库 > Ext.Container scrollable

Ext.Container scrollable

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.     },

Ext.Container scrollable