ExtJS 4.0.7: Tree grid not showing

Question

I have been unable to make a dynamic tree grid show up as it should - the data behind the grid is working and I can see the result being printed to the FireBug Console. Yet none of it is showing in the ExtJS Tree Grid, none except the Root node which has been statically set in the store.

The view:

Ext.define('TS.view.file.archives.raGrid', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.ramaingridpanel',

    id: 'raGrid',
    autoScroll: true,
    store: 'file.archives.Resources',
    layout: {
        type: 'hbox',
        align: 'top',
        pack: 'start'
    },
    columns: [{
        xtype: 'treecolumn',
        id: 'raGridResourceName',
        flex: 2,
        dataIndex: 'text',
        width: 100,
        hideable: false,
        groupable: false,
        text: 'Name',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'templatecolumn',
        id: 'raGridResourceIcon',
        tpl: new Ext.XTemplate('<div id="{iconCls}" class="{iconCls}" role="presentation">&nbsp;</div>').html,
        flex: 0.1,
        dataIndex: 'iconCls',
        hideable: false,
        groupable: false,
        editor: {
            xtype: 'combobox',
            store: Ext.data.StoreManager.lookup('file.archive.ResourceIcons')
        }
    }, {
        xtype: 'datecolumn',
        id: 'raGridDate',
        flex: 1,
        dataIndex: 'updated',
        hideable: false,
        groupable: false,
        text: 'Updated'
    }, {
        xtype: 'gridcolumn',
        id: 'raGridPurchasingUnit',
        flex: 1,
        dataIndex: 'purchasedUnit',
        groupable: false,
        text: 'Unit',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'numbercolumn',
        id: 'raGridCost',
        flex: 1,
        dataIndex: 'purchasedCost',
        groupable: false,
        text: 'Cost excl. VAT',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'numbercolumn',
        id: 'raGridDiscount',
        dataIndex: 'purchasedDiscount',
        flex: 1,
        groupable: false,
        text: 'Discount %',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'gridcolumn',
        id: 'raGridEstimatingUnit',
        flex: 1,
        dataIndex: 'estimateUnit',
        groupable: false,
        text: 'Unit',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'numbercolumn',
        id: 'raGridAddOn',
        flex: 1,
        dataIndex: 'profitAddOn',
        groupable: false,
        text: 'Mark-up %',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'numbercolumn',
        id: 'raGridLanded',
        flex: 1,
        dataIndex: 'landedCost',
        groupable: false,
        text: 'Landed cost',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'numbercolumn',
        id: 'raGridCostPrice',
        flex: 1,
        dataIndex: 'number',
        groupable: false,
        text: 'Costprice',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'numbercolumn',
        id: 'raGridUnitCorrelation',
        flex: 1,
        dataIndex: 'unitCorrelation',
        groupable: false,
        text: 'Prch./Est.',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'numbercolumn',
        id: 'raLeadTime',
        flex: 1,
        dataIndex: 'leadTime',
        groupable: false,
        text: 'Leadtime',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'gridcolumn',
        id: 'raGridClass',
        flex: 1,
        dataIndex: 'ResourceClassShortname',
        groupable: false,
        text: 'Class',
        editor: {
            xtype: 'textfield'
        }
    }, {
        xtype: 'gridcolumn',
        id: 'raGridSupplier',
        flex: 1,
        dataIndex: 'supplierName',
        groupable: false,
        text: 'Supplier',
        editor: {
            xtype: 'textfield'
        }
    }],
    viewConfig: {
        id: 'raGridView'
    },
    plugins: [{
        ptype: 'rowediting',
        autoCancel: false,
        clicksToEdit: 2
    }, {
        ptype: 'gridviewdragdrop',
        ddGroup: 'raDdGroup'
    }]
});

The store:

Ext.define('TS.store.file.archives.Resources', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.file.archives.Resources',

    model: 'TS.model.file.archives.Resources',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'index.php/ajax/resources/',
        reader: {
            type: 'json',
            root: 'results',
            successProperty: 'success',
            totalProperty: 'total'
        }
    },
    root: {
        text: 'Resources',
        id: 'myResources',
        expanded: true,
        children: {}
    }
});

The model:

Ext.define('TS.model.file.archives.Resources', {
extend : 'Ext.data.Model',
alias : 'model.file.archives.Resources',

fields : [ {
    name : 'id',
    type : 'int'
}, {
    name : 'parent_id',
    type : 'int'
}, {
    name : 'child_id',
    type : 'int'
}, {
    name : 'text',
    type : 'string'
}, {
    name : 'updated',
    type : 'date'
}, {
    name : 'purchasedUnit',
    type : 'string'
}, {
    name : 'purchasedCost',
    type : 'double'
}, {
    name : 'purchasedDiscount',
    type : 'double'
}, {
    name : 'estimateUnit',
    type : 'string'
}, {
    name : 'profitAddOn',
    type : 'string'
}, {
    name : 'addonManager',
    type : 'string'
}, {
    name : 'landedCost',
    type : 'double'
}, {
    name : 'unitCorrelation',
    type : 'double'
}, {
    name : 'leadTime',
    type : 'string'
}, {
    name : 'ResourceClassShortname',
    type : 'string'
}, {
    name : 'supplierName',
    type : 'string'
}, {
    name : 'iconCls',
    type : 'string'
}, {
    name : 'ClientSessionId',
    type : 'string'
} ]
});

The JSON data:

({
    "success":"true", 
    "total":"1", 
    "results":
    [{
        "id":0,
        "parent_id":0,
        "child_id":2,
        "text":"Gravemaskiner",
        "updated":1339079129,
        "purchasedUnit":"",
        "purchasedCost":0,
        "purchasedDiscount":0,
        "estimateUnit":"",
        "profitAddOn":"",
        "landedCost":0,
        "unitCorrelation":0,
        "leadTime":"",
        "ResourceClassShortname":"",
        "supplierName":"",
        "iconCls":"iconFolder",
        "leaf":false,
        "children":...

If anyone would be so kind an point out what's wrong with my code that would be great,

G.

Using ExtJS 4.0.7

---

Update: 2012-06-19

Been testing a lot and this error seems to have something to do with it, but I'm not sure what it means and how to solve it:

records[i] is undefined /extjs/ext-all-dev.js Line 88068

Have printed the objects to console and they clearly show the data in the store.

---

Answer 1

Sencha support replied the following:

The reason the tree is not loading correctly is because the json invalid for the tree to digest.

The problem was in the JSON - how it was generated:

// I used this:
$result[$i] = $newArray;

// To fix I had to use this to generate the JSON
array_push($result,$newArray);

And:

I did notice on your original json, that it was wrapped in "( )" which is incorrect.

Answer 2

Your reader need to be defined like so:

reader : {
    type : 'json',
    root : 'children',
    successProperty : 'success',
    totalProperty : 'total'
}

And your json root should change from results to children.