extJS: Adding grid.Panel from Controller to View causes application to hang (MVC)

Question

I am trying to dynamically create grid.Panels and add them to my View, since I don't know have many "Views" I need before I load the data. For example, I have a number of people in different groups, once I load the data, I want to create a grid.Panel for each group and put the correct people in it.

The problem is that my application hangs when I do it (probably because the Store is being loaded recursively)

How do I add a grid.Panel to my View with data from a Store without it hanging?

My Controller:

Ext.define('NG.controller.Navigation', {
    extend: 'Ext.app.Controller',

    refs: [{
        selector: 'group',
        ref: 'groupPanel'}
    ],

    stores: ['Groups'],

    init: function() {
         this.control({
            'navigation': {
                itemdblclick: this.onNavigationSelection
            }
        });
    },
    onNavigationSelection: function(view, record, item, index, eventobj, obj) {

        var groupsstore = this.getGroupsStore();

        var group1 = Ext.create('Ext.grid.Panel', {
            store: groupsstore,
            title: 'Group 1',
            columns: [
                    {header: 'Name', dataIndex: 'name'},
                    {header: 'Mail:',  dataIndex: 'mail'}
            ]
        });

        groupsstore.load();

        this.getGroupPanel().add(group1);
    }
});

My View:

Ext.define('NG.view.Group', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.group',
    store: 'Groups',
    initComponent: function() {
        this.callParent();
    }
});

And my Store (not sure if it is needed):

Ext.define('NG.store.Groups', {
    extend: 'Ext.data.Store',
    requires: 'NG.model.Person',
    model: 'NG.model.Person'
});

Best regards and thank you in advance!

Andreas

the problem might be because you assign the same store to all grids — nscrob
Hi nscrob, thank you for your reply. I am actually using the above code with only one store and that fails, so I haven't tried adding more yet (because that will obviously also fail). Sorry for not making that clear. — andreasnauta
Are there any error messages on the console of your browser? — suknic
"Uncaught RangeError: Maximum call stack size exceeded" after a few mins. I am probably referencing something to itself and causing an infinite loop, but I can't see it. — andreasnauta

andreasnauta andreasnauta · Accepted Answer · 2011-10-27T12:49:06

After walking through each reference I could not find any errors in the code. However I found a bug report about a similar problem:

http://www.sencha.com/forum/showthread.php?141804-4.0.5-Grid-Uncaught-RangeError-Maximum-call-stack-size-exceeded

I downloaded the Framework last week, and there was an update a few days ago, which solved this bug and my problem as well.

Thank you for your help!

extJS: Adding grid.Panel from Controller to View causes application to hang (MVC)

2 Answers