ExtJS 3.0.0 tree fork

by b_long

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css">
<script src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base-debug.js"></script>
<script src="http://extjs.cachefly.net/ext-3.0.0/ext-all-debug.js"></script>

JavaScript

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var mockData = {
	"folders": [
		{
			"id": "12312",
			"name": "A",
			"folders": [
			]
		},
		{
			"id": "13212124",
			"name": "B",
			"folders": [
			]
		},
		{
			"id": "32325235",
			"name": "C",
			"folders": [
			]
		},
		{
			"id": "-foo",
			"name": "fooey Foo",
			"folders": [
				{
					"id": "fooey-foo-bar1",
					"name": "fooey Foo Bar 1",
					"folders": [
						{
							"id": "fooey-foo-bar-buzz",
							"name": "fooey Foo Bar Buzz",
							"folders": [
								{
									"id": "fooey-foo-bar-buzz-bang",
									"name": "fooey Foo Bar Buzz Bang",
									"folders": [
									]
								}
							]
						}
					]
				},
				{
					"id": "fooey-foo-bar2",
					"name": "fooey Foo Bar 2",
					"folders": [
						{
							"id": "fooey-foo-bar-bizz",
							"name": "fooey Foo Bar Bizz",
							"folders": [
							]
						}
					]
				},
				{
					"id": "fooey-foo-bar3",
					"name": "fooey Foo Bar 3",
					"folders": [
					]
				}
			]
		}
	]
};
Ext.onReady(function () {
    var tree = new Ext.tree.TreePanel({
        loader: new Ext.tree.TreeLoader(),
        width: 200,
        animate: true,
        autoScroll: true,
        height: 300,
        renderTo: Ext.getBody(),
        listeners: {
            beforeexpandnode: function (node) {
                //node.setIcon("your-new-image");
            },
            beforecollapsenode: function (node) {
                //node.setIcon("your-default-image");
            }
        },
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            leaf: false,
            //icon: 'folder_closed.gif',
            text: 'PARENT'
            , children: []
        })
    });
});