ExtJS6 TreeGrid Not Displaying Child Nodes

Question

I have a tree grid based on the following code:

Ext.application({
    name : 'Fiddle',
    launch : function() {
        var treeData = [{
            mtype: 'InsDataModel',
            recordid: '1',
            companyname: 'Company 1',
            children:[{           
                mtype: 'PlnDataModel',
                recordid: '1A',
                planname: 'Plan 1A'
            },{
                mtype: 'PlnDataModel',                
                recordid: '1B',
                planname: 'Plan 1B'
            }]
        },{
            mtype: 'InsDataModel',            
            recordid: '2',
            companyname: 'Company 2',
            children: []
        },{
            mtype: 'InsDataModel',            
            recordid: '3',
            companyname: 'Company 3',
            children:[{
                mtype: 'PlnDataModel',                
                recordid: '3A',
                planname: 'Plan 3A'
            },{
                mtype: 'PlnDataModel',                
                recordid: '3B',
                planname: 'Plan 3B'
            },{
                mtype: 'PlnDataModel',                
                recordid: '3C',
                planname: 'Plan 3C'
            },{
                mtype: 'PlnDataModel',                
                recordid: '3D',
                planname: 'Plan 3D'
            },{
                mtype: 'PlnDataModel',                
                recordid: '3E',
                planname: 'Plan 3E'                
            }]
        }];
        Ext.define('InsDataModel',{
            extend: 'Ext.data.TreeModel',
            childType: 'PlnDataModel',
            fields:[
                {name: 'recordid'},
                {name: 'text', mapping:'companyname'}
            ]            
        });
        Ext.define('PlnDataModel',{
            extend: 'Ext.data.TreeModel',
            fields:[
                {name: 'recordid'},
                {name: 'text', mapping:'planname'}
            ]
        });
        Ext.define('InsDataStore',{
            extend: 'Ext.data.TreeStore',
            model: 'InsDataModel',
            proxy:{                
                reader:{typeProperty: 'mtype'}
            },
            data:treeData,            
        });
        Ext.define('InsDataGrid',{
            extend: 'Ext.tree.Panel',
            store: {
                model: 'InsDataModel',
                proxy:{          
                    type: 'memory',
                    reader:{typeProperty: 'mtype'}
                },
                data:treeData
            },
            title: 'My tree Demo',
            renderTo: Ext.getBody(),
            width: 400,            
            height: 600,            
            useArrows: true,
            columns:[{
                text: 'Network',
                dataIndex: 'text',
                flex: 1
            }]
        });               
        var newTree = Ext.create('InsDataGrid').show();
    }
});

Which is also located at: https://fiddle.sencha.com/#fiddle/136t

The problem I am running into is the child nodes will not display the text when the parent node is expanded. Can someone please take a look at the code and let me know what I am doing incorrectly. Thank you.

Hey Mitchell, My application is working with remote data. For some reason I could not get the data1.json url to work in fiddle so I decided to make the data local. The problem does still persist with my remote data. I assume that this will work with the remote data as well? — Elcid_91

Mitchell Simoens Mitchell Simoens · Accepted Answer · 2015-12-31T18:40:46

mapping as a string requires the reader to read a remote response to build the functions to do the mapping. Also, you should remove childType from InsDataModel model: https://fiddle.sencha.com/#fiddle/136u

ExtJS6 TreeGrid Not Displaying Child Nodes

1 Answers