PDA

View Full Version : Can NOT scroll down to bottom while grouping rows



bright.wang
31 May 2012, 7:22 PM
I echo some rows on the remote php file and setup extjs store "Ext.data.Store" using proxy to retrieve data. It preforms group well, but I can not scroll down to bottom.
It seems that the grid did not count group headers.

bright.wang
1 Jun 2012, 12:56 AM
Here is a patch that allows the local and remote file list views to scroll up when you a drag a file over the top item in the list and scroll down when you drag a file over the bottom item in the list.

Thank you for your reply. What I was trying to say is that we are using a gridpanel with "Infinite Scrolling" combined with the grouping feature of the gridpanel. If we don't use grouping, Everything works fine. We can scroll to the bottom of the grid. But when we use grouping, we are not able to scroll to the bottom because Extjs doesn't take the group-headers into account. When calculating the height of the grid via 'totalProperty' variable, it ignores the height of the group-headers. So for example when we have 10 groups and each group header has a height of 20px, then Extjs stops scrolling down 200px too early. Also when I collapse the group, Extjs doesn't recalculate the scrolling bar. Is this a bug or do we forgett to setup something?


Here is our code:



var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Char: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true
});


var contactListStore = Ext.create('Ext.data.Store', {
id: 'tmContactStore',
pageSize: 30,
model: 'ContactShortInfo',
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
groupField: 'group_char',
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: 'ajax',
url: '/ajax.php?module=contact&page=getJsonContactList',
reader: {
root: 'contacts',
totalProperty: 'totalCount'
},
simpleSortMode: true
}
});


panel.add([
{
xtype: 'panel',
layout: {
type: 'border'
},
id:"contact_ifr_list",
iconCls: 'ico_settings_listView',
title: 'Liste',
items: [{
id: 'panel_contact_list',
xtype:"gridpanel",
region: 'center',
store: contactListStore,
verticalScrollerType: 'paginggridscroller',
loadMask: false,
features: groupingFeature,
flex:1,
// grid columns
columns:[...]
}]
}

]);