Docs Treegrid Example

HTML

<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-debug.js"></script>
<script type="text/javascript">
    function addNodes() {
        var node = Ext.getCmp('sampleTree').items.items[0].node.childNodes[0];
    
for(var cnt=0;cnt < 400; cnt++)
			{		  
				node.appendChild({
				"task": cnt+"Hello",
duration: cnt,
                user: 'Tommy Maintz' + cnt,
                    iconCls: 'task',
                    leaf: true    
			});
    
			}    
    };
</script>
<input type="button" onclick="javascript:addNodes();" value="Click Me"/>
<div id="tree"/>

CSS

#tree{
    height:600;
    width:100%
}

JavaScript

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);


var treejson = {"text":".","children": [
    {
        task:'Project: Shopping',
        duration:13.25,
        user:'Tommy Maintz',
        iconCls:'task-folder',
        expanded: true,
        children:[{
            task:'Housewares',
            duration:1.25,
            user:'Tommy Maintz',
            iconCls:'task-folder',
            children:[]
    }]
    }]};
 

Ext.onReady(function() {
    
    //we want to setup a model and store instead of using dataUrl
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'task',     type: 'string'},
            {name: 'user',     type: 'string'},
            {name: 'duration', type: 'string'}
        ]
    });


    
    var store = Ext.create('Ext.data.TreeStore', {
        model: 'Task',
        proxy: {
            type: 'memory',
            data: treejson
        },
        folderSort: true
    });

    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
    var tree = Ext.create('Ext.tree.Panel', {
        id:'sampleTree',
        title: 'Core Team Projects',
        width: 500,
        height: 1000,
        renderTo: Ext.Element.get('tree'),//Ext.getBody(),
        collapsible: true,
        useArrows: true,
        rootVisible: false,
        store: store,
        multiSelect: true,
        singleExpand: true,
        //the 'columns' property is now 'headers'
        columns: [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Task',
            flex: 2,
            sortable: true,
            dataIndex: 'task'
        },{
            //we must use the templateheader component so we can use a custom tpl
            xtype: 'templatecolumn',
            text: 'Duration',
            flex: 1,
            sortable: true,
            dataIndex: 'duration',
            align: 'center',
            //add in the custom...