tree panel

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function () {
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                    "email": "[email protected]",
                    "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                    "email": "[email protected]",
                    "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                    "email": "[email protected]",
                    "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                    "email": "[email protected]",
                    "phone": "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    Ext.create('Ext.data.Store', {
        storeId: 'simpsons2Store',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': []
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    Ext.create('Ext.form.Panel', {
        title: 'Functional Groups',
        height: 600,
        width: 400,
        margin: '15 25 10 5',
        bodyPadding: 10,
        flex: 1,
        buttons: [{
            text: 'Add',
            action: 'insertGroup'
        }, {
            text: 'Save',
            action: 'saveGroup',
            iconCls: 'saveBtn',
            hidden: true
        }, {
            text: 'Clear',
            action: 'clear'
        }],
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'fieldset',
            title: 'Members',
            itemId: 'members',
            items: [{
                xtype: 'grid',
                border: false,
                emptyText: 'No members in this...