EXTJS tree panel

by basmaat

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all-gray.css">

JavaScript

var BasTree = Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    title: 'Simple Tree',
    width: 150,
    height: 350,
    root: {
        text: 'Root',
        expanded: true,
        children: [
            {
                text: 'Child 1',
                leaf: true
            },
            {
                text: 'Child 2',
                leaf: true
            },
            {
                text: 'Child 3',
                expanded: true,
                children: [
                    {
                        text: 'Grandchild',
                        leaf: true
                    }
                ]
            }
        ]
    }
});


var root = BasTree.getRootNode();

var parent = root.appendChild({
    text: 'Parent 1'
});

parent.appendChild({
    text: 'Child 3',
    leaf: true
});

parent.insertChild(1, {
    text: 'Child 2.5',
    leaf: true
});

parent.expand();