ExtJS Tree Menu

https://www.facebook.com/groups/id.extjs/permalink/495625950516864/

by konglie

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">

JavaScript

Ext.require([
    'Ext.window.*',
    'Ext.tree.*',
    'Ext.data.*']);

var menus = [{
    "text": "Apps",
        "index": 1,
        "cls": "folder",
        "expanded": false,
        "leaf": false,
        "href": "",
        "id": "1",
        "children": [{
        "text": "Setting",
            "index": 2,
            "cls": "file",
            "expanded": false,
            "leaf": true,
            "href": "setting",
            "id": "2",
            "root": []
    }, {
        "text": "Option",
            "index": 3,
            "cls": "folder",
            "expanded": false,
            "leaf": false,
            "href": "",
            "id": "3",
            "children": [{
            "text": "Option 1",
                "index": 1,
                "cls": "file",
                "expanded": false,
                "leaf": true,
                "href": "option1",
                "id": "7",
                "root": []
        }]
    }, {
        "text": "Testing",
            "index": 4,
            "cls": "file",
            "expanded": false,
            "leaf": true,
            "href": "testing",
            "id": "4",
            "root": []
    }]
}, {
    "text": "Report",
        "index": 1,
        "cls": "folder",
        "expanded": false,
        "leaf": false,
        "href": "",
        "id": "5",
        "children": [{
        "text": "Report Testing",
            "index": 2,
            "cls": "file",
            "expanded": false,
            "leaf": true,
            "href": "reporttest",
            "id": "6",
            "root": []
    }]
}];
console.log(menus);

Ext.application({
    name: 'Main Window',
    launch: function () {
        Ext.create('Ext.window.Window', {
            title: 'Main Window',
            layout: 'border',
            width: 400,
            height: 300,
            closable: false,

            items: [{
                region: 'north',
                tbar: [{
                    xtype: 'splitbutton',
  ...