PDA

View Full Version : capturing scrolling in GridPanel



rahul.sood
1 Feb 2014, 12:23 PM
I am confused, this must be something simple that i do not see. All I want to do is capture scroll event on a grid panel. here is my code I have tried comp.mon and comp.el.on but none seem to work. Could someone tell me what i am doing wrong and how I can capture scrolling.
The code in red is what I have been playing with.




Ext.define('MyApp.view.earmark.Grid', {


extend : 'MyApp.view.portal.Portlet',
alias : 'widget.earmarkgrid',
requires: [
'Ext.grid.Panel',
'Ext.grid.column.Template',
'Ext.grid.column.Action',
'Ext.grid.RowNumberer'
],
config: {
//earmarkStore: 'Earmarks', // step 8
earmarkStore:'BufferedEarmarks',
sponsorStore: 'Sponsors'
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},


renderSponsor : function(value, p, record) {
return record.getAssociatedData().sponsor.FULLNAME;
},


expensiveTpl : Ext.create('Ext.XTemplate',
'<tpl if="AMT_CONF &gt; 999">',
'<span style="color:red">{AMT_CONF}</span>',
'</tpl>',
'<tpl if="AMT_CONF &lt; 1000">',
'<span style="color:green">{AMT_CONF}</span>',
'</tpl>'
),
handleScroll:function(){
console.log('scrolling');
},
initComponent : function() {


Ext.apply(this, {
layout : 'fit',
width : 400,
height : 300,


items : [
{
xtype: 'grid',
id:'myGrid1',
store : Ext.getStore(this.getEarmarkStore()),


columnLines : true,
viewConfig : {
stripeRows : true
},
loadMask : true,
disableSelection : true,
columns : [
// step 9
{
xtype:'rownumberer',
width:40
},
{
text : 'Year',
sortable : true,
dataIndex : 'ENACTED_YEAR',
width : 50
}, {
text : 'Sponsor',
sortable : true,
dataIndex : 'IDSPONSOR',
flex : 1,
renderer : this.renderSponsor
}, {
text : 'Description',
sortable : false,
dataIndex : 'EARMARK_DESCRIPTION',
flex : 1
}, {
xtype : 'templatecolumn',
align : 'right',
text : 'Amt ($000)',
width : 75,
sortable : true,
dataIndex : 'AMT_CONF',
tpl : this.expensiveTpl
}, {
xtype : 'actioncolumn',
width : 50,
items : [{
icon : '/ftextjs4/assets/images/like.gif',
tooltip : 'Like',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.alert("You like ", rec.get('EARMARK_DESCRIPTION'));
}
}, {
getClass : function(v, meta, rec) {
if(rec.get('AMT_CONF') > 1000) {
this.items[1].tooltip = 'I\'m not happy!';
return 'outrage';
} else {
this.items[1].tooltip = 'Save the cash-ola!';
return 'dislike';
}
},
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.alert("You dislike " , rec.get('EARMARK_DESCRIPTION'));
}
}]
}],
listeners:{
render:function(comp){
debugger;
/*comp.el.on('onscroll', function(){
console.log('scrolling');
})*/
comp.mon(comp.getEl(), 'scroll', function(){
console.log('scrolling');
} );


}
}


}]


});
this.callParent(arguments);


} // initComponent
});

evant
1 Feb 2014, 5:53 PM
Try listening to:



grid.getView().on('bodyscroll', function() {
// ...
});

rahul.sood
2 Feb 2014, 8:17 AM
thanks that worked like a charm, now the next question, is there an event that one can detect if the scroll bar has reached the end of the view. I am thinking there must be a way to find out the xy position of the scroll bar and cross check it against the height of the view portion of the grid panel and some how see if the xy position of the scroll bar was at the bottom of the view portion of the grid....something like that. Please excuse the ambiguity of my question. I have not researched it just thought would ask to see if there is a very apparent way to do this before I embark on it myself.

evant
2 Feb 2014, 2:21 PM
You want to check the scrollTop against the scrollHeight.

rahul.sood
4 Feb 2014, 9:06 AM
hi Evant Can you help me understand this..I have scrollHeight at 675 , scroll width is 371 and scrollTop is the only number that changes. But the math does not work out. I thought scrollHeight is equivalent to the height of the box. So eventually scrollTop would become the same as scrollHeight. But when i get to the bottom of the box scrollTop is 432 and the difference between Height and top is 243 which does not add up to the width..Can you help me understand these numbers...what exactly is width and what is height, how do I check it against the other. thanks

rahul.sood
4 Feb 2014, 9:13 AM
I think i found it scroll.target.clientHeight is the number that makes up the difference