PDA

View Full Version : Infinite scrolling with grouped header



webfriend13
19 Mar 2012, 11:55 PM
HI All,

Is it possible to implement infinite scrolling in ExtJs grid along with grouped headers? I am using ExtJs 4.07 framework.

Thanks in advance

mitchellsimoens
20 Mar 2012, 8:52 AM
Sure you can. Here is a grid that I modified fromt he infinite-scroll.js example:


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
},{
text : 'Info',
flex : 1,
columns : [
{
text : 'Last Post',
dataIndex : 'lastpost',
renderer : Ext.util.Format.dateRenderer('n/j/Y g:i A')
},
{
text : 'Replies',
dataIndex : 'replycount'
}
]
}],
renderTo: Ext.getBody()
});