Load listener on store of Extjs 4 not working

Question

I was looking for something like 'load' listener of store in Extjs 4, but I am facing some problems.

1) I was under impression that 'success' parameter to 'load' listener method tells us whether operation was successful or not, but 'success' parameter contains one array. I dont know what do that array contains but after invoking 'success.length' property I found out that it contains actual number of rows which my server side code had sent as a response. So I think 'success' property actually contains my data, but I am not sure about it.

2) If I use Ext.each() method on 'records' or 'success' parameter, I am not able to see actual data loaded. How to see the actual data?

Code for store looks as below :

Ext.define('myCompany.store.customerDistribution', {
    extend: 'Ext.data.TreeStore',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/customerDistribution/customerCount.json',
        reader: {
            type: 'array',
            root: 'resultset'
        }
    },
    listeners: {
        load: function(store, records, success) {
            /*console.log('store - ' + store +
                        ', typeof(store) - ' + typeof(store) +
                        ', records - ' + records +
                        ', records data - ' + records.data +
                        ', success - ' + success +
                        ', type of success - ' + typeof(success)+
                        ', success length - ' + success.length);
            if(records == true) {
                console.log('records is data property...');
            }
            if(store == true) {
                console.log('store is a data property...');
            }
            for(r in records) {
                console.log(r + '\ttypeof(r) -> ' + typeof(r));
            } */
            if(success && records.length > 0) {
                var allCountries = [];
                var previousCountry = undefined;

                var countryIndex = 0;
                var stateIndex = 1;
                var cityIndex = 2;
                var customerCountIndex = 3;

                Ext.each(records, function(record, index){
                    console.log('record - ' + record[0] + ', ' + record[1]);
                });
            }
        }
    }
});

I am trying to convert row based json to hierarchical json to be displayed in tree panel. That is why I am using load listner. My Json looks as follows :

{
    "queryInfo":{"totalRows":"100"},

    "resultset":[
        ["India","India","India",63],
        ["India",""," Tirupati ",1],
        ["India",""," UTTARPARA ",1],
        ["India","Andhra Pradesh",null,61],
        ["India","Andhra Pradesh"," Chittoor ",1],
        ["India","Andhra Pradesh"," Guntur ",2],
        ["India","Andhra Pradesh"," Hyderabad ",58]
      ],
    "metadata":[
        {"colIndex":0,"colType":"String","colName":"Country"},
        {"colIndex":1,"colType":"String","colName":"State"},
        {"colIndex":2,"colType":"String","colName":"City"},
        {"colIndex":3,"colType":"Integer","colName":"customer_count"}
    ]
}

and I want to convert it to :

"resultset": [
    countries: [
    {
        name: "India",
        customer_count: 63
        states: [
            {
                name: "Andhra Pradesh",
                customer_count: 61,
                cities: [
                    {
                        name: "Tirupati",
                        customer_count: 1
                    },
                    {
                        name: "UTTARPARA",
                        customer_count: 1
                    },
                    {
                        name: "Chittoor",
                        customer_count: 1
                    },

                    {
                        name: "Guntur",
                        customer_count: 2
                    },
                    {
                        name: "Hydrabad",
                        customer_count: 58
                    }
                ]
            }
        ]
    }
]

Please help !!

Solution

You have choosen wrong load event signature. In TreeStore it has following signature load( Ext.data.TreeStore this, Ext.data.NodeInterface node, Ext.data.Model[] records, Boolean successful, Object eOpts ). In addition records are arranged in tree structure, so you can't iterate through them with each.

Here is example code which logs each record in tree to console:

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    proxy: {
        type: 'ajax',
        url: 'treegrid.json'
    },

    logRecord: function(r, depth) {
        if (!depth) { depth = ''; }
        console.log(depth + Ext.encode(r.data));

        Ext.each(r.childNodes, function(record, index){
            this.logRecord(record, depth + '    ');
        }, this);
    },

    listeners: {
        load: function(sender, node, records) {
            Ext.each(records, function(record, index){
                this.logRecord(record);
            }, this);
        }
    }
});