Create static tree in ExtJS

How to create static trees in ExtJS

by ATechieDiary

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
Check this for more details:<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'
    }],
    proxy: {
        type: 'memory',
        data: {
            success: true,
            children: [{
                name: 'Cars',
                leaf: false, // this is a branch   
                expanded: false,
                children: [{
                    name: 'Mercedes-Benz',
                    leaf: true // this is a leaf node. It can't have children. Sad! :-(   
                }, {
                    name: 'Audi',
                    leaf: true
                }, {
                    name: 'Ferrari',
                    leaf: true
                }]
            }]
        }
    }
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Car'
});

Ext.create('Ext.tree.Panel', {
    title: 'Car Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    lines: true, // will show lines to display hierarchy.    
    useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed
    renderTo: Ext.getBody(),
    columns: [{
        xtype: 'treecolumn',
        dataIndex: 'name', // value field which will be displayed on screen   
        flex: 1
    }]
});