Recently in one of my project we have a Sencha Touch list and top banner. Each list item have certain banner text to show. When user scrolls up or down we have to show the banner text of list item which is on top position in the top banner panel. It should change as user moves up or down. For that we have to find top visible item index or record of list. So here is my logic for that.
As we know that all the list item have certain fix height that we can specify with itemHeight config. Each list is scrollable with scroll view. We can simply calculate top visible item by dividing y offset of scrollview with item height of the list. This will give us top visible item index. Here is the logic to do that. Add reference of your list to controller and bind initialize event of the list.
myList:{
initialize: 'onMyListInit'
},
No we will bind scroll event to this list scroller.
onMyListInit: function(list){
var listItemHeight = 53;
var scroller = list.getScrollable().getScroller();
scroller.on({
scroll: function(scroller, x, y, e){
var currentVisibleItemOnTopIndex = parseInt(y/listItemHeight);
}
});
}
This logic will give us top visible item index. You can find record from index using getAt method of list store. In my case I get the record and use it's banner text to display on top banner above the list. It keeps changing as you scroll up or down the list. Please note that this trick will only work if you have simple list with fixed height of the item. If you have variable heights or group list. This trick will not work. As in group list we have items arranged in groups so their indexes changed. We might have to find some other solution for that. If you have any idea post a comment.
No comments:
Post a Comment