ExtJs 4.1 - Loading JSON to TreeStore with varying children fields

by Izhaki

HTML

<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css" />

JavaScript

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [ 'name' ]
});

// Norite that the JSON carries 3 different types of subs:
// people, children, sons
var iJson = {
    people: [
        { name: "Bill", expanded: true, children: [
            { name: "Kate", leaf: true },
            { name: "John", leaf: true }            
        ] },
        { name: "Norman", expanded: true, sons: [
            { name: "Mike", leaf: true },
            { name: "Harry", leaf: true }            
        ] }
    ]
};

Ext.define('MyVariJsonReader', {
    extend: 'Ext.data.reader.Json',
    alias : 'reader.varijson',

    buildExtractors : function()
    {
        var me = this;

        me.callParent(arguments);
                
        me.getRoot = function ( aObj ) {
            
            // Special cases
            switch( aObj.name )
            {
                case 'Bill': return aObj[ 'children' ];
                case 'Norman': return aObj[ 'sons' ];                    
            }
            
            // Default root is `people`
            return aObj[ 'people' ];
        };
    }
});

var iTreeStore = Ext.create('Ext.data.TreeStore', {
    autoload: true,
    model: 'Person',
    
    proxy: {
        type: 'memory',
        data: iJson,
        reader: 'varijson'
    }
    
});

var iTree = Ext.create('Ext.tree.Panel', {
    id: 'tree',
    store: iTreeStore,
    
    displayField: 'name',
    
    width: 250,
    height: 300,
    rootVisible: false,
    renderTo: document.body
});