View Full Version : Pagination with Grouping, Too much recursion/buffer overflow.

28 Jan 2016, 7:34 AM
In the past I have developed apps with grouping or pagination and they run great but when I tried to combine them and select an item in my grid my app throws "too much recursion" firefox and buffer overflows in IE 8. The too much recursion is happening at 13847 in extjs-all. I have noticed that as long as my page size is under 15 everything works fine. In ie the grid will scroll and jump around for a bit then throw the error.
13843 Ext.define('Ext.dom.AbstractElement_traversal', {
13844 override: 'Ext.dom.AbstractElement',
13847 findParent: function(simpleSelector, limit, returnEl) {
13848 var target = this.dom,
13849 topmost = document.documentElement,
13850 depth = 0,
13851 stopEl;

Ext.define('customerLine', {
extend: 'Ext.data.Model',
idProperty: 'id',
totalProperty: 'total',
fields: [
{name: 'start_date', type: 'date', dateFormat: 'Y-m-d'},
{name: 'id', type: 'float'},
{name: 'type', type: 'float'}
proxy: {
api: {
read : '/customer/getcust',
actionMethods: {
read : 'POST',
noCache: true,
simpleSortMode: true,
timeout: 120000, // 2 minute timeout
type: 'ajax',
reader: {
root: 'data',
totalProperty: 'total'
writer: {
root: 'data',
type: 'json',
encode: true
var store = Ext.create('Ext.data.Store', {
model: 'customerLine',
groupField: 'type',
autoSave: false,
autoLoad: false,
remoteSort: true,
pageSize: 30,
sorters: {property: "start_date", direction: "DESC" }

var gsummary = {
id: 'groupsum',
ftype: 'groupingsummary',
groupHeaderTpl: '{columnName}: {name} ({rows.length} {[values.rows.length > 1 ? "Lines" : "Line"]})',
hideGroupedHeader: false,
enableGroupingMenu: true


Ext.create('Ext.grid.Panel', {
features: [gsummary],
store: store,
id: 'psrgrid',
columns: [
{ text: 'Date', dataIndex: 'start_date' },
{ text: 'ID', dataIndex: 'id' }
height: 200,
width: 400,
dockedItems: [{
dock: 'bottom',
xtype: 'pagingtoolbar',
id: 'pagingtb',
store: store,
displayMsg: 'Displaying Shortage {0} - {1} of {2}',
displayInfo: true

var viewport = Ext.create('Ext.Viewport', {
layout: 'border',
items: [
region: 'center',
layout: 'fit',
split: true,
items: ['psrgrid']

Gary Schlosberg
28 Jan 2016, 8:25 AM
Sounds like this issue, which was fixed in 5.x, however that test case doesn't have problems in 4.x.

Are you able to recreate this issue in a test case?

8 Feb 2016, 9:57 AM
Thank you for your help. After some testing what is literally happening is this, when I group my grid and click on a line the selection will jump to the item that would be on that line if the grid was not grouped. It seems to throw to much recursion when it cannot find this item?

IE 8 will jump from item to item until it hits a stack overflow...interesting to watch

Update: this is only occuring when remotesort is enabled

So in summary: problem occurs when remotesort: is true + pagination + grouping

Update: I found a solution that is hacky but provides a manual replacement for remotesort.
listeners: {
sortchange: function(thisGrid, sortinfo) {
if (!firstLoad) {
store.currentPage = 1;
sort = sortinfo.dataIndex;
dir = sortinfo.sortState;
params: {sort: sort, dir: dir}