Not having much luck with this NestedList business.

Can anyone tell me why this is giving me a blank?

For the Store I tried using direct structure and with JSON url. Neither worked.

If I append "fullscreen: true" in the app.js NestedList parameter like so:
Code:
        this.navPanel = new Ext.NestedList({
            fullscreen: true,
            store: expense.categoriesStore,
            title: 'Expenses Title'
        });
This renders the title "Expenses Title" and nothing else.

Here's my code.

app.js
Code:
Ext.ns('expense');

Ext.setup({
    onReady: function() {
        this.ui = new expense.ContainerPanel({
        });        
    }
});

expense.ContainerPanel = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card', 
    initComponent: function() {
        this.navPanel = new Ext.NestedList({
            store: expense.categoriesStore,
            title: 'Expenses Title'
        });
                
        expense.ContainerPanel.superclass.initComponent.call(this);
    }
});
categories_model.js
Code:
Ext.regModel('CategoriesModel', {
        fields: [{
                name: 'text',
                type: 'string'    
        }]
    }
);
categories_store.js
Code:
/*
expense.Structure = [{
    text: 'Test',
    items: [{
        text: 'Test a',
        items: [],
        leaf: true
    }, {
        text: 'Test b',
        items: [],
        leaf: true
    }]
}, {
    text: 'Test 2',
    items: [],
    leaf: true
}];
*/
expense.categoriesStore = new Ext.data.TreeStore({
        model: 'CategoriesModel',
/*        root: {
            items: expense.Structure
        },
*/        proxy: {
            type: 'ajax',
            url: 'app/json/categories.json',
            reader: {
                type: 'tree',
                root: 'items'    
            }    
        }    
    }
);
categories.json
Code:
{
    "text": "Expenses",
    "items": 
    [
        {
            "text": "Food",
            "items":
            [
                {
                    "text": "Groceries",
                    "items": [],
                    "leaf": true    
                },
                {
                    "text": "Eating out",
                    "items": [],
                    "leaf": true    
                }
            ]
        },
        {
            "text": "Entertainment",    
            "items":
            [
                {
                    "text": "Events",
                    "items": [],
                    "leaf": true    
                },
                {
                    "text": "Movies",
                    "items": [],
                    "leaf": true    
                },
                {
                    "text": "Hobbies",
                    "items": [],
                    "leaf": true    
                }
            ]
        },
        {
            "text": "Transport",
            "items":
            [
                {
                    "text": "Fuel",
                    "items": [],
                    "leaf": true    
                },
                {
                    "text": "Public Transport",
                    "items": [],
                    "leaf": true    
                }
            ]
        }
    ]    
}