PDA

View Full Version : Ext.ux.InfiniteScrollGridPanel



KimSchneider
21 Oct 2009, 12:43 AM
Hey, I've just created this "on scroll reload" grid, feel free to use it.


Ext.ux.InfiniteScrollGridPanel = Ext.extend(Ext.grid.GridPanel, {
epp: 10,
currentpos: 0,
currentpage: 1,
defaultTitle: null,
initComponent:function(config) {
if(!config) {
config = {};
}
Ext.apply(this, config);

// call parent initComponent
Ext.ux.InfiniteScrollGridPanel.superclass.initComponent.call(this);

this.defaultTitle = this.title;

this.on('bodyscroll', this.loadTrigger);
this.on('afterlayout', function() {
this.loadTrigger(0, 1)
} );
this.getStore().on('load', function() {
this.loadTrigger(0, 1)
}, this );
},
loadTrigger: function(left, top) {
var grid = this;
var pageheight = grid.epp * 20;
var listheight = grid.getStore().getCount() * 20;
var innerheight = grid.getInnerHeight() - 25;

if(grid.getStore().getCount() <= grid.epp) {
grid.getView().scrollToTop();
grid.currentpos = 0;
grid.currentpage = 1;
}

if(grid.getStore().getCount() >= grid.getStore().getTotalCount()) {
return;
}

if(top <= grid.currentpos) {
return;
}

if(top+innerheight > pageheight*grid.currentpage ||
(top+innerheight < pageheight*grid.currentpage && pageheight >= listheight)) {
var state = grid.getView().getScrollState();

grid.getStore().reload({
params: {
start: grid.currentpage * grid.epp,
limit: grid.epp
},
callback : function() {
grid.getView().restoreScroll(state);
grid.currentpage++;
grid.updateTitle();
},
add: true
});
}

grid.currentpos = top;

grid.updateTitle();
},

updateTitle : function() {
if(this.defaultTitle != null) {
var grid = this;
grid.setTitle(this.defaultTitle + ' (' + grid.getStore().getCount() + '/' + grid.getStore().getTotalCount() + ')');
}
}
});

comments are welcome, negative and positive.

there is one problem my firebug is reporting. sometimes while scrolling it throws an error:

o is undefined
http://localhost:8080/ServerEye3/js/lib/ext/ext-all.js?52
Line 9
maybe someone's got a hint for this one...

cheers