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: 'children',
            convert: function(v, r){
                var children = r.get('rows');
                var result =  Ext.isArray(children)? children: v;
                console.log('children value = ', result, v, r);
                return r;
            }
        }],
        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'
    });
    var p = 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
        }]
    });
    var s = p.getStore();
    console.log(p, s);

});