Question

I am trying to load a json store when I click on a particular row in another grid. Can anyone see what I am doing wrong here? In the ext-all.js the error comes back as data is undefined (from debugger).

        Ext.define('Documents', {
            extend: 'Ext.data.Model',
            fields: [
                { name: 'index', type: 'int' },
                { name: 'path', type: 'string' }
            ]
        });

        var documents = new Ext.data.JsonStore({
            model: 'Documents',
            root: 'groupdocuments',
            autoLoad: false
        });

        // in the Ext.grid.Panel

        listeners: {
            itemclick: function () {

                var itemgroupid = rec.get('groupid');

                Ext.Ajax.request({
                    url: '/GetDocuments',
                    params: { groupId: itemgroupid },
                    success: function (result) {

                        var jsondata = Ext.decode(result.responseText);
                        documents.loadData(jsondata);
                    }
                });
            }
        }

        // the sample json returned from url
        // { "groupdocuments": [{ "index": 1, "path": "1.doc" }, { "index": 2, "path": "2.doc" }, { "index": 3, "path": "3.doc" }] }

Answer 1

it looks like you need to escape the path data. should be { path: “C:\\something\\” }

Also why not use the grid Grouping feature?

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.feature.Grouping

In looking further it looks like the loaddata function is expecting an array. Not a json object with a rootdata object like you are giving it. change the listener to the following:

var jsondata = Ext.decode(result.responseText);
documents.loadData(jsondata.groupdocuments);

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-loadData

alternatively you should be able to use loadRawData with the full json object.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-loadRawData