PDA

View Full Version : [4.0.6] Infinite Grid cannot show first row when scrolling back up



SebTardif
29 Sep 2011, 8:45 AM
REQUIRED INFORMATION To find bugs on the grid, it usually just require to try changing one line in the examples. Ext version tested:

Ext 4.0.6

Browser versions tested against:

Chrome 12

Description:

Using a slightly modified version of Sencha own examples/grid/infinite-scroll.html we can reproduce the behavior of not be able to scroll back to the first row

Steps to reproduce the problem: Use pageSize: 25 and store.guaranteeRange(0, 24); Then scrolldown and back to the top using the scroll arrow pointing to the top.

The result that was expected: We should not have a functinal UI bug when changing store optimization settings.

The result that occurs instead: Unable to reach first row.

Test Case:

/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller'
]);

Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});

// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
pageSize: 25,
model: 'ForumThread',
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
extraParams: {
total: 50000
},
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'lastpost',
direction: 'DESC'
}]
});

function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}


var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
verticalScrollerType: 'paginggridscroller',
loadMask: true,
disableSelection: true,
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
// id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
// TODO: This poses an issue in subclasses of Grid now because Headers are now Components
// therefore the id will be registered in the ComponentManager and conflict. Need a way to
// add additional CSS classes to the rendered cells.
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: false
},{
text: "Author",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true
}],
renderTo: Ext.getBody()
});

// trigger the data store load
store.guaranteeRange(0, 24);
});




HELPFUL INFORMATION

Screenshot or Video:

attached

See this URL for live test case: http://

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css
custom css (include details)

Operating System:

WinXP Pro

Thomas Triplet
27 Mar 2012, 12:32 PM
I'm having the exact same problem here, with ExtJS v4.0.7. I would add that this occurs only when scrolling back up with the mouse wheel. Moving the scroll bar cursor with the mouse works fine.

karlsnyder0
27 Mar 2012, 3:29 PM
You might consider 4.1. We had a load of problems with Infinite Grid pre 4.1 and they've since rewritten Infinite Grid and we are much happier with it now.

dfrederick
29 Mar 2012, 9:54 AM
When the grid first loads, the inner table that is rendered is the correct size. I haven't dug into the source yet, but after getting a more rows, the table is no longer sized correctly, it's filling the full height of the html body, so the missing rows are there but are hidden by the header and any other elements that appear above(vertically) on the page. I suspect it's deleting the table and recreating a new one but being given an absolute position on the page with the wrong offset.

I'd be happy to move to 4.1, but I haven't seen any timelines for when it's expected to move out of beta. We have a released planned for August and cannot release using a beta product.

ithompson
14 Jul 2015, 11:18 AM
Using this solution, I got this working 4.0.7

https://www.sencha.com/forum/showthread.php?132642-Buffered-Store-with-infinite-grid-scrolling-issues&p=1108317&viewfull=1#post1108317