Grid buffered/infinite scrolling in 4.1

[scancubus]

03.08.12

[Animal]

Are you using non-standard row heights?

To calculate correct positioning, by default, it measures the height of the first rendered row, and then assumes they are all the same.

That's how it creates a "stretcher" el which causes the correctly proportioned scrollbar. And that is how, after rendering a small table, it calculates what the correct top position of the table is within that scrollable range.

If there are non-standard row heights, then more complex processing has to be used, so you have to tell it to do so using the following in your grid config:

verticalScroller: {
    variableRowHeight: true
},

[dongryphon]

Don, just for clarification -- these changes will appear in the RC's, or just the Final GA release?

They have already appeared in the nightly builds and will be in the next public build.

[scancubus]

Hey Animal, Yes they are non-standard. So when I add in that config of variableRowHeight:true, I am getting an error in "beforeViewRefresh"

me.scrollOffset = -view.el.getOffsetsTo(rows[me.commonRecordIndex])[1];

the variables are as follows in stack at this point....
me.commonRecordIndex=undefined
rows=[]

So when it calls getOffsetsTo, The error is Cannot call method 'getXY' of null

Also, I got the following from a post on here, and when it is applied, when you resize a column, the view doesn't change at all. Does anything in it stick out to you? We have filters in the column headers, and we are trying to set the height at 72

columns:{
		border : true,
		height : 72,
		layout : {
		                type                 : 'gridcolumn',
		                availableSpaceOffset : 0,
		                align                : 'stretch',
		                resetStretch         : true
		},
		items  : [  { column1}, {column2}..etc ] 
}

[scancubus]

Hello,

When you have scrolled horizontally in the grid, the headers dont always reset themselves to the correct position. For example, if i scroll halfway across, when i scroll down and the VIEW refreshes, the headers are off by the amount that I have scrolled horizontally.

I narrowed it down, I think, to a call of headerCt.updateLayout(). This looks to reset the header to its original position. I had to override the refresh method of Ext.view.Table. This makes it so that the header doesnt look like it is bouncing from side to side everytime the grid refreshes, it now stays where it should. I noticed that the scrollLeft also gets put back to 0.

Anyone else notice this? Anyone else code at 12:21am on a Saturday? ha

Ext.override(Ext.view.Table,{
					
					refresh: function() {
				        this.setNewTemplate();
				        this.callParent(arguments);
				        this.doStripeRows(0);
				        this.ownerCt.syncHorizontalScroll(this.getEl().dom.scrollLeft);
				    }
			});

[Animal]

Hey Animal, Yes they are non-standard. So when I add in that config of variableRowHeight:true, I am getting an error in "beforeViewRefresh"

me.scrollOffset = -view.el.getOffsetsTo(rows[me.commonRecordIndex])[1];

the variables are as follows in stack at this point....
me.commonRecordIndex=undefined
rows=[]

So when it calls getOffsetsTo, The error is Cannot call method 'getXY' of null

Also, I got the following from a post on here, and when it is applied, when you resize a column, the view doesn't change at all. Does anything in it stick out to you? We have filters in the column headers, and we are trying to set the height at 72

columns:{
		border : true,
		height : 72,
		layout : {
		                type                 : 'gridcolumn',
		                availableSpaceOffset : 0,
		                align                : 'stretch',
		                resetStretch         : true
		},
		items  : [  { column1}, {column2}..etc ] 
}

Yes, there's a recently introduced bug with variableRowHeight. I have a fix submitted which will be in the final 4.1

[Animal]

Hello,

When you have scrolled horizontally in the grid, the headers dont always reset themselves to the correct position. For example, if i scroll halfway across, when i scroll down and the VIEW refreshes, the headers are off by the amount that I have scrolled horizontally.

I narrowed it down, I think, to a call of headerCt.updateLayout(). This looks to reset the header to its original position. I had to override the refresh method of Ext.view.Table. This makes it so that the header doesnt look like it is bouncing from side to side everytime the grid refreshes, it now stays where it should. I noticed that the scrollLeft also gets put back to 0.

Anyone else notice this? Anyone else code at 12:21am on a Saturday? ha

Ext.override(Ext.view.Table,{
					
					refresh: function() {
				        this.setNewTemplate();
				        this.callParent(arguments);
				        this.doStripeRows(0);
				        this.ownerCt.syncHorizontalScroll(this.getEl().dom.scrollLeft);
				    }
			});

I can't reproduce this. What browser and OS?

[Animal]

I'm adding filtering ability to the example. Few glitches found - fixing them now...

[scancubus]

I can't reproduce this. What browser and OS?

I am in windows 7, chrome 17. If you are going to use the infinite grid example or tuner, I just increased the width of the first column, then scroll horizontally.

After scrolling horizontally, start scrolling vertically and you will see the headers resetting themselves, most of the time they "bounce" back to the original position, but you can stop at a point, and the headers are not lined up with the view. attached a pic

headers_misaligned.jpg

[scancubus]

Animal, one other question.


When you are using a store with the MVC architecture, i dont think that calling destroy on it is a good idea. I am not sure if it will mess up the references in the controller.

I am using it with the infinite grid, the user can sort, filter, etc. How would you recommend "Resetting" the store to its original state before calling loadPage() on it again?

I used to have to do this.

store.filters.clear();
if(store.prefetchData){
           store.prefetchData.clear();
}
store.data.clear();
delete store.guaranteedStart;
delete store.guaranteedEnd;
delete store.totalCount;