ExtJS tree not populating with proxy store

Question

Here is my tree code:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            {
                text: "Group A",
                expanded: true,
                leaf: false,
                children: [{
                    text: 'Harry',
                    leaf: true
                },
                {
                    text: 'Steven',
                    leaf: true
                }]
            },
            {
                text: "Group B",
                expanded: true,
                leaf: false,
                children: [{
                    text: 'Tony',
                    leaf: true
                },
                {
                    text: 'Jason',
                    leaf: true
                }]
            }
        ]
    }
});

Ext.define('DHT.view.Category.CategoryList', {
    extend: 'Ext.tree.Panel',      
    alias: 'widget.treeList',
    width: 200,
    height: 400,
    //store: store,
    store: ['DHT.store.Categories'],
    rootVisible: false
});

store code:

Ext.define('DHT.store.Categories', {
    extend: 'Ext.data.Store',
    model: 'DHT.model.Category',
    autoLoad: true,
    autoSync: true,
    proxy: {
        type: 'ajax',
        url: 'http://localhost:52984/ExtJsRestfulService.svc/QuestionTypes',
        reader:
        {
            type: 'json',
            root: 'description'
        }
    }
});

model code:

Ext.define('DHT.model.Category', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'QuestionTypeID',
        dataType: 'int'
    },
    {
        name: 'Description',
        dataType: 'string'
    },
    {
        name: 'Deleted',
        dataType: 'int'
    },
    {
        name: 'ChangeDate',
        dataType: 'date'
    },
    {
        name: 'ChangeUser',
        dataType: 'string'
    },
    {
        name: 'Visible',
        dataType: 'bool'
    },
    {
        name: 'SortOrder',
        dataType: 'int'
    }],
    idProperty: 'QuestionTypeID'
});

I am unable to create a tree this way. It gives me an error: TypeError: store.getRootNode is not a function. If I create the tree with inline data i.e., replace //store: store, store: ['DHT.store.Categories'], with store: store, //store: ['DHT.store.Categories'], the tree populates without any problem. Can anyone point out what is the problem?

matt matt · Accepted Answer · 2013-12-16T10:55:15

The store config of your tree panel should either be an instance of Ext.data.TreeStore or - if you are in an MVC environment (which I assume by your class names) - the name of the store (without without the namespace DHT.store).

In any case, don't wrap the store in an array with square brackets [].

store: Ext.create('DHT.store.Categories')

or

store: 'Categories'

ExtJS tree not populating with proxy store

1 Answers