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.

I do have a feeling that I'm missing something in my controller. I have found this code `settingsTreeStore.getRootNode().appendChild(userTreeStore.getRootNode()).expand();` on another site - how would I add that to my current controller? Some code to fire `afterload` of the gridview perhaps? — GauteR, Jun 18 '12 at 14:48
I'm getting a lot of errors from 4.1.0. Apparently something to do XTemplate and such. — GauteR, Jun 19 '12 at 08:30
This kind of sounds like the duplicate ID issue with 4.0.7. Try making sure that all of the nodes in the tree have a unique ID. If they don't all have unique IDs, the view on the tree will not index the nodes correctly. Also make sure that all node ids are of the same datatype, don't mix numerics and strings. — Reimius, Jun 25 '12 at 19:52
I have been able to upgrade to 4.1.0 now and it's still not working, but I have requested help from Sencha Support so hopefully I'll get it working. Will post the results on here. — GauteR, Jun 27 '12 at 13:59

score 1 · Answer 1 · answered Jun 18 '12 at 16:20

1

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.

answered Jun 18 '12 at 16:20

Izhaki

23,372
9
69
107

Changed the json root and the reader definition, but not working yet. – GauteR Jun 19 '12 at 08:38

score 0 · Accepted Answer · answered Jul 11 '12 at 13:06

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.

ExtJS 4.0.7: Tree grid not showing

2 Answers2