Loading a Tree into the West Navigational Panel of a Complex ExtJS 4.0 Layout

I really like the complex layout example in ExtJS. I was looking at the accordian panel and thought it would be great to load a tree there. So I did. How? First you must define a store for your tree:

var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true
        },
        proxy: {
            type: 'ajax',
            url: 'tree-data.json'
        }
    });

Then you must define your treePanel:

 var treePanel = Ext.create('Ext.tree.Panel', {
        id: 'tree-panel',
        title: 'Tree Layout',
        region:'west',
        split: true,
        height: 360,
        minSize: 150,
        rootVisible: false,
        autoScroll: true,
        store: store
    });

Then insert your tree into the west panel of the example:

{
    region: 'west', // a center region is ALWAYS required for border layout
                stateId: 'navigation-panel',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'West',
                split: true,
                width: 200,
                minWidth: 175,
                maxWidth: 400,
                collapsible: true,
                animCollapse: true,
                margins: '0 0 0 5',
                layout: 'accordion',
                items: [{
                    contentEl: 'west',
                    title: 'Navigation',
                    iconCls: 'nav',
     // see the HEAD section for style used
                }, {
                    title: 'Tree',
                    html: '
Some settings in here.
',
     items: treePanel,
                    iconCls: 'settings'
                }, {
     }, {
                    title: 'Settings',
                    html: '
Some settings in here.
',
                    iconCls: 'settings'
                }, {
                    title: 'Information',
                    html: '
Some info in here.
',
                    iconCls: 'info'

You insert the code above right where the west region is defined. Now please note you will need to copy the tree-data.json from the layout-browser folder in examples to the layout folder. And you have a tree in the accordion navigation panel of your complex layout!