Create dynamic trees in ExtJS

How to create dynamic trees in ExtJS

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
Check the below link for detail explanation of this fiddle:
<br/>
<a href='http://atechiediary.blogspot.com/2013/06/extjs-how-to-create-static-and-dynamic.html'> Detail Blog entry </a>

<br/>
<br/>

JavaScript

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

var carTree = new Ext.tree.TreePanel({
    title: 'Car Dynamic Tree',
    useArrows: true,
    lines: false,
    height: 150,
    width: 200,
    store:carStore,
    renderTo: Ext.getBody()
});

var carRootNode = {   
    leaf: false,
    children: []
};
//set root node
//carTree.setRootNode(carRootNode);

//suppose this is your store containing dynamic data (coming from ajax response or populated on screen
var carStore = Ext.create('Ext.data.Store', {
    model: 'Car',
    data: [{
        name: 'Mercedes-Benz'
    }, {
        name: 'Ferrari'
    }, {
        name: 'Audi'
    }, {
        name: 'Prius'
    }]
});

//get the root of the tree
var root = carTree.getRootNode();

//iterate over your store and append your children one by one
carStore.each(function (rec) {
    var childAttrModel;
    //Create a new object and set it as a leaf node (leaf: true)  
    childAttrModel = {
        name: rec.data.name,
        text: rec.data.name,
        leaf: true,
    };
    // add/append this object to your root node 
    root.appendChild(childAttrModel);
});