sencha touch 高性能 list最简单高效的实现方案

sencha touch 的list,性能非常的低,官方论坛有人说超过200个项就已经是超标了!但事实上超过40个项就非常卡了,尤其是每个项里还有图图片的时候,在iphone中可能效果不错,但到了android,你可能会摔手机.

卡的原因其实是元素太多,必需限制显示的数据,但又要解决上滚和下滚显示相应的项,有人会想到用分页,其实分页相当的麻烦,下面就说一个鄙人奋战了一天摸索出来的方法,仅仅三步,几行代码,你看了也会会心一笑.

1.

view
source

print?

1.

me.pageNum
= 1;

//当前页

2.

me.pageItems
= Ext.is.Phone?15:25;

//每页显示项

3.

me.list.scroller.on(

'scrollend'

,me.onScrollerEnd,me);

//监听滚动停止事件

2.

view
source

print?

01.

onScrollerEnd
:

function

(scroller,offsets){

//分页逻辑

02.

03.

var

me
=

this

,

04.

05.

lh
= scroller.size.height,

06.

07.

h
= me.list.getHeight(),

08.

09.

y
= offsets.y;

10.

11.

if

(me.filterValue
&& me.filterValue!=

''

){

return

;}

12.

13.

if

(y==0){

//滚动到顶部时显示上一页

14.

15.

if

((me.pageNum>1)){

16.

17.

me.pageNum--;

18.

19.

me.doPaging
();

20.

21.

}

22.

23.

}

else

if

((y+h)>=lh){

//滚动显底部时显示下一页

24.

25.

var

c
= me.listStore.getCount();

26.

27.

if

(c
> (me.pageNum*me.pageItems)){

28.

29.

me.pageNum++;

30.

31.

me.doPaging
();

32.

33.

}

34.

35.

}

36.

37.

},

3.

view
source

print?

01.

doPaging
:

function

(){

//分页逻辑

02.

03.

var

me
=

this

,

04.

05.

n
= me.pageNum,

06.

07.

y
= me.pageItems;

08.

09.

me.helpStore.removeAll();

//清除所有数据

10.

11.

me.helpStore.add(me.listStore.getRange((n-1)*y,
(n*y)));

//取主store里的范围

12.

13.

me.list.bindStore(me.helpStore);

//绑定到当前list里

14.

15.

me.list.scroller.scrollTo({x:
0, y:0},

false

);

//滚动到顶部

16.

17.

},

//end
function doPaging