Grief with extJS4 treegrid using custom model and async loading

Question

I just cannot seem to get the tree grid up and running. I have defined the model, the store and the treegrid (as seen below). The tree grid shows inside target, the data is loaded async (checked with fiddler, two rows came back) however the treegrid just shows two rows with empty cells.

I tried debugging and the store's root node indeed has two child nodes, the model data is under child's raw property (except some fields such as leaf and iconCls which are also in data property), yet the tree grid shows two empty rows, despite dataIndex pointing to a proper model field.

It's like tree grid cannot find the field defined by the model?!?

Here's the source (I am using sandbox because I am integrating this into salesforce vforce, the salesforce merge fields {!} are also valid and render properly)

Ext4.onReady(function() {

    var target = '{!$Component.childBlock.childTreeDiv}';


    Ext4.define('ConfigurationItem', {
        extend: 'Ext4.data.Model',
        fields: [
            {
            id: 'id',
            type: 'string'},
        {
            id: 'name',
            type: 'string'},
        {
            id: 'recordType',
            type: 'string'},
        {
            id: 'ciName',
            type: 'string'},
        {
            id: 'alias',
            type: 'string'},
        {
            id: 'model',
            type: 'string'},
        {
            id: 'status',
            type: 'string'},
        {
            id: 'description',
            type: 'string'},
        {
            id: 'leaf',
            type: 'bool'},
        {
            id: 'iconCls',
            type: 'string'}
        ]
    });

    var store = Ext4.create('Ext4.data.TreeStore', {
        model: 'ConfigurationItem',
        root: {
            nodetype: 'async',
            id: '{!CI__c.Id}',
            expanded: true
        },
        proxy: {
            type: 'ajax',
            url: 'json_CIChildren',
            reader: {
                type: 'json',
                root: 'children'
            }
        }
    });

    tree = Ext4.create('Ext4.tree.Panel', {
        width: document.getElementById(target).offsetWidth,
        autoHeight: true,
        title: 'Child Configuration Items',
        collapsible: true,
        titleCollapse: true,
        renderTo: target,
        rootVisible: false,
        store: store,
        multiSelect: true,
        singleExpand: true,
        columns: [
            {
            type: 'treecolumn',
            text: 'CI#',
            dataIndex: 'name'},
        {
            text: 'Type',
            dataIndex: 'recordType'}
        ]
    });
});​

The request to json_CIChildren?_dc=1329830854458&node=a0NT0000006tYKzMAM was valid (the parentID in root.id got propagated ok) and came back with valid json:

{ "children" : [
         {
             "id": "a0NT0000006tswhMAA",
             "name": "CI334593834",
             "recordType": "Rack",
             "ciName": "Empty rack",
             "alias": "",
             "model": "",
             "status": "",
             "description": "",
             "leaf": "true",
             "iconCls": "x4-ciicon-Rack"
         },
         {
             "id": "a0NT0000006tYKuMAM",
             "name": "CI2345234",
             "recordType": "Service",
             "ciName": "Business Connect - Premium",
             "alias": "",
             "model": "",
             "status": "",
             "description": "",
             "leaf": "true",
             "iconCls": "x4-ciicon-Service"
         }
 ]}

What am I doing wrong? Why isn't the treegrid seeing name and recordType fields?

Is this because store only saw NodeInterface-like fields and there is none of my custom data in data property?

Answer 1

I think the problem is your model fields aren't mapped right. The "id" property for each field should be the 'name' property instead.