Ext JS 4.1.1 Tree Demo with Large Data

by knalli

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.1/resources/css/ext-all.css">

JavaScript

Ext.define('MyTreeModel', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'text',
        type: 'string'
    }, {
        name: 'description',
        type: 'string'
    }, {
        name: 'type',
        type: 'string'
    }, {
        name: 'iconCls',
        type: 'string'
    }, {
        name: 'attributes',
        type: 'auto'
    }]
});

Ext.define('MyTreeStore', {
    extend: 'Ext.data.TreeStore',
    alias: 'widget.mytreestore',
    model: 'MyTreeModel'
});

Ext.define('MyTreePanel', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.mytreepanel'
});

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',

        dockedItems: [{
            dock: 'right',
            width: 200,
            xtype: 'mytreepanel',
            title : 'Tree',
            store : Ext.create('MyTreeStore')
        }],
    
        items: [{
            xtype: 'panel',
            title: 'Panel',
            html: 'Just a panel'
        }]
    
});

Ext.application({

    name: 'MyApp',
    autoCreateViewport: true,

    launch: function() {

    }

});