How to display text in tree nodes for TreeGrid in ExtJS

Question

I am trying to display text in the tree grid. I can get the 'form' of the data correct, using the root object. But I am having trouble displaying text, either next to the node, or in the corresponding table column.

My code looks like this :

        Ext.onReady (function () {

            var treePanel = new Ext.tree.TreePanel({
                title: ' ',
                width: 900,
                height: 300,
                renderTo: Ext.getBody(),
                rootVisible: false,
                singleExpand: true,
                columns: [{
                    xtype: 'treecolumn',
                    text: 'Outlet',
                    dataIndex: 'outlet'
                },{
                    text: 'Mc Area',
                    dataIndex: 'mcarea'
                }
                ],
                root: {
                    children: [
                        {
//                            text: 'Outlet Group 1', ??
                            outlet: "Outlet Group 1",
                            mcArea: "Latin America",

                            children: [
                                {
                                    outlet: "Outlet 1",
                                    mcArea: "Argentina"

                                },{
                                    text: "Outlet 2",
                                    mcArea: "Chile"
                                }
                            ]
                        },
                        {
                            text: "Outlet Group 2"
                        }
                    ]
                }
            });
        });

But this is what I see :

ie. No text values. I would have assumed that 'outlet' in the data structure would match up with 'outlet' dataIndex in the columns.

Answer 1

For a tree grid you will need to use a TreeStore with a corresponding Model , that defines the field outlet . Your root can just be moved to the store's config:

store: Ext.create('Ext.data.TreeStore', {
    root: {
        children: [
            {
                outlet: "Outlet Group 1",
                mcArea: "Latin America",

                children: [
                    {
                        outlet: "Outlet 1",
                        mcArea: "Argentina"

                    },{
                        text: "Outlet 2",
                        mcArea: "Chile"
                    }
                ]
            },
            {
                text: "Outlet Group 2"
            }
        ]
    },
    // model is created inline by the store
    fields: [
        {name: 'outlet', type: 'text'}
    ]
})

The root config on the tree panel is intended for simple trees only, and will create a tree store with a minimalistic model, but won't work with custom data fields.