PDA

View Full Version : HELP!!! How to detect scroll event for grid?



DonExt
8 Oct 2009, 10:37 PM
What is the proper way to detect scroll event for a grid?

I am using livegrid, but that should not matter. I have tried everything, but I must be missing something.


Thanks in advance.

Don

evant
8 Oct 2009, 10:44 PM
http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel&member=bodyscroll

DonExt
8 Oct 2009, 10:54 PM
Thanks, but I have been doing that one all day with no success. What am I doing wrong?
Is it because it is LiveGrid?


////////////////////////////////////////////////////////////
// LiveGrid
////////////////////////////////////////////////////////////
var myGrid = new Ext.ux.grid.livegrid.GridPanel({
title: 'LiveGrid1',
region: 'center',
enableDragDrop : false,
cm : new Ext.grid.ColumnModel([
{header: "Id", align : 'left', width: 160, sortable: true, dataIndex: 'id'},
{header: "Name", align : 'left', width: 160, sortable: true, dataIndex: 'name'},
{header: "Position", align : 'left', width: 160, sortable: true, dataIndex: 'POSITION'},
{header: "Ambition", align : 'right', width: 160, sortable: true, dataIndex: 'ambition'}
]),


loadMask : {
msg : 'Loading...'
},
height:300,
width:600,
store : myStore,
selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
view : myView,
bbar : new Ext.ux.grid.livegrid.Toolbar({
view : myView,
displayInfo : true
}),
listeners: {
bodyscroll: function(left,top) {
alert("Scroll");
}
}

});

DonExt
8 Oct 2009, 10:56 PM
Thanks, I tried that with no success. What am I doing wrong?

Is it because of LiveGrid?

////////////////////////////////////////////////////////////
// LiveGrid
////////////////////////////////////////////////////////////
var myGrid = new Ext.ux.grid.livegrid.GridPanel({
title: 'LiveGrid1',
region: 'center',
enableDragDrop : false,
cm : new Ext.grid.ColumnModel([
{header: "Id", align : 'left', width: 160, sortable: true, dataIndex: 'id'},
{header: "Name", align : 'left', width: 160, sortable: true, dataIndex: 'name'},
{header: "Position", align : 'left', width: 160, sortable: true, dataIndex: 'POSITION'},
{header: "Ambition", align : 'right', width: 160, sortable: true, dataIndex: 'ambition'}
]),


loadMask : {
msg : 'Loading...'
},
height:300,
width:600,
store : myStore,
selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
view : myView,
bbar : new Ext.ux.grid.livegrid.Toolbar({
view : myView,
displayInfo : true
}),
listeners: {
bodyscroll: function(left,top) {
alert("Scroll");
}
}

});

DonExt
8 Oct 2009, 11:04 PM
I tried that, but it did not work.

Code snippet:

bbar : new Ext.ux.grid.livegrid.Toolbar({
view : myView,
displayInfo : true
}),
listeners: {
bodyscroll: function(left,top) {
alert("Scroll");
}
}

});

evant
8 Oct 2009, 11:35 PM
It definitely works with a normal grid, you might want to look through the ux source to see if it does anything funky.



Ext.onReady(function(){
var g = new Ext.grid.GridPanel({
width: 100,
height: 100,
renderTo: document.body,
store: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
columns: [{
dataIndex: 'field1',
header: 'Field'
}],
listeners: {
bodyscroll: function(){
console.log('hi!');
}
}
});
});

Animal
9 Oct 2009, 12:12 AM
It's probably a little different because it's not really scrolling the grid when you use that scroll control. It's paging.

It's like a regular paging gridpanel but using a slider in the paging toolbar. That scrollbar is just a control which it uses to calculate the start and limit of the data block to pull into the viewable area.

DonExt
9 Oct 2009, 12:17 AM
So, if it is paging, what would be the solution for saving and restoring a slider in livegrid?

Any suggestions would be helpful.

Don

Animal
9 Oct 2009, 12:21 AM
You want to save the paging position? It's the start and limit in the params of

http://www.extjs.com/deploy/dev/docs/?class=Ext.data.Store&member=lastOptions

DonExt
9 Oct 2009, 12:21 AM
So, it might work if I save and restore record values in the store. Any code snippets on how to accomplish this?

What do you think?

Don

DonExt
9 Oct 2009, 12:23 AM
Thanks Animal,

I will check this out. BTW, I did send you the info you were looking for.

Don

Animal
9 Oct 2009, 12:24 AM
OK, I'll check my mails this evening, thanks.

DonExt
9 Oct 2009, 1:17 AM
Can someone please show me code snippets of how to:

1. Override the start and limit values within a store.load call - having trouble with specific syntax

2. Which event can I use to determine if the data in the LiveGrid display has changed. In short, I need to process code when the start value changes, then I need to obtain the current start and limit values.

Thanks.

Don

Animal
9 Oct 2009, 1:44 AM
I think Thorsten needs to add some more events and allow some finer control. To know when the thing is scrolling try



Ext.ux.grid.livegrid.GridView.prototype.onLiveScroll =
Ext.ux.grid.livegrid.GridView.prototype.onLiveScroll.createSequence(function() {
this.grid.fireEvent("bodyscroll", this.scroller.dom.scrollLeft, this.liveScroller.dom.scrollTop);
});


You see that second parameter is the scroll position of the paging scroller, not the visual scroll area, so THAT is what you need to save and restore, not the start and limit.

When you want to restore the position, you just do



myLiveGrid.view.liveScroller.dom.scrollTop = savedPosition;


And it should do the rest.