Results 1 to 6 of 6

Thread: capturing scrolling in GridPanel

  1. #1

    Default Answered: capturing scrolling in GridPanel

    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.
    Code:
    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
    });

  2. Try listening to:

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

  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    Try listening to:

    Code:
    grid.getView().on('bodyscroll', function() {
        // ...
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3

    Default capturing scrolling in GridPanel

    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.

  5. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    You want to check the scrollTop against the scrollHeight.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #5

    Default

    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

  7. #6

    Default

    I think i found it scroll.target.clientHeight is the number that makes up the difference

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •