ExtJS 4 TreeStore Static JSON - won't load

Question

I'm simply trying to get a static JSON file to load into a TreeStore, and I'm tearing my hair out.

I have a model:

Ext.define('pronghorn_ui_keyboard.model.CommandKey', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'id'
        },
        {
            name: 'key'
        },
        {
            name: 'command'
        }
    ]
});

I have a TreeStore:

Ext.define('pronghorn_ui_keyboard.store.Commands', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'pronghorn_ui_keyboard.model.CommandKey'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'commands',
            model: 'pronghorn_ui_keyboard.model.CommandKey',
            proxy: {
                type: 'ajax',
                url: 'commands.json',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});

And I have the following JSON at commands.json:

{
    id: 'root',
    key: null,
    command: null,
    children: [
        {
            id: 't'
            key: 't'
            command: null,
            children: [
                {
                    id: 'te'
                    key: 'e'
                    command: 'Trade Equity'
                    leaf: true
                }
            ]
        }
    ]
}

I'm trying to programmatically load this tree and inspect it in the console. In the Controller init function:

var me = this;

me.getCommandsStore().load({
    callback: function() {
        me.rootCommandKey = me.getCommandsStore().getRootNode();
        me.currentCommandKey = me.rootCommandKey;
        console.log(me.currentCommandKey);
        console.log(me.currentCommandKey.id);
        console.log(me.currentCommandKey.hasChildNodes());
        me.initMainCommands();
    },
    scope: me
});

The console has something for currentCommandKey, but the ID isn't my root ID, and hasChildNodes() is false. So obviously the file isn't being loaded.

What am I doing wrong?

Answer 1

My JSON was invalid; basically missing commas.

Here's the correct JSON:

{
    success: true,
    children: [
        {
            string: 't',
            key: 't',
            command: null,
            children: [
                {
                    string: 'te',
                    key: 'e',
                    command: 'Trade Equity',
                    leaf: true
                }
            ],
            leaf: false
        }
    ]
}

I need to do a better job of error handling with async calls too. I moved a bunch of stuff into methods on the Store itself and bound that init state on the load event using a local binding, which exposed a bunch of load-terminating-condition flags.