load entire tree

Ext 4.2.0

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.define('Eagle.model.NodeModel', {
        extend: 'Ext.data.Model',

        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'text'
        }, {
            name: 'description'
        }, {
            name: 'active',
            type: 'bool'
        }, {
            name: 'generating',
            type: 'bool'
        }, {
            name: 'sameAsTarget',
            type: 'bool'
        }, {
            name: 'newGeneration',
            type: 'bool'
        }],
        proxy: {
            type: 'ajax',
            api: {
                read: '
            http: //klaartjedevoecht.be/test/missionData.php'
            }
        }
    });

    Ext.define('Eagle.store.TreeStore', {
        extend: 'Ext.data.TreeStore',

        model: 'Eagle.model.NodeModel',

        root: {
            name: 'Clients',
            expanded: true
        },

        nodeParam: 'id'
    });

    Ext.create('Ext.tree.Panel', {
        renderTo: Ext.getBody(),
        width: 300,
        height: 200,
        title: 'Clients',
        store: Ext.create('Eagle.store.TreeStore'),
        columns: [{
            xtype: 'treecolumn',
            header: 'Name',
            dataIndex: 'name',
            flex: 1
        }]
    });

});