ExtJS TreeStore, TreePanel with Twitter data

by basmaat

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all-gray.css">

CSS

#usersTreePanel .demo-userNode .x-grid-cell-inner {
    height: 30px;
    font-size: 1.2em;
}

.demo-userNodeIcon {
    height: 25px;
    width: 25px;
}

JavaScript

Ext.define('demo.UserModel', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'profile_image_url']
});


var userTreeStore = Ext.create('Ext.data.TreeStore', {
    
    model: 'demo.UserModel',
    
    proxy: {
        type: 'jsonp', // Because it's a cross-domain request
        
        url : 'https://api.twitter.com/1/lists/members.json?owner_screen_name=Sencha&slug=sencha-team&skip_status=true',
        
        reader: {
            type: 'json',
            root: 'users' // The returned JSON will have array 
                          // of users under a "users" property
        },
        
        // Don't want proxy to include these params in request
        pageParam: undefined,
        startParam: undefined,
        pageParam: undefined,
        pageParam: undefined
    },
    
    listeners: {
        
        // Each demo.UserModel instance will be automatically 
        // decorated with methods/properties of Ext.data.NodeInterface 
        // (i.e., a "node"). Whenever a UserModel node is appended
        // to the tree, this TreeStore will fire an "append" event.
        append: function( thisNode, newChildNode, index, eOpts ) {
            
            // If the node that's being appended isn't a root node, then we can 
            // assume it's one of our UserModel instances that's been "dressed 
            // up" as a node
            if( !newChildNode.isRoot() ) {
                
                // The node is a UserModel instance with NodeInterface
                // properties and methods added. We want to customize those 
                // node properties  to control how it appears in the TreePanel.
                
                // A user "item" shouldn't be expandable in the tree
                newChildNode.set('leaf', true);
                
                // Use the model's "name" value as the text for each tree item
                newChildNode.set('text', newChildNode.get('name'));
                
                //...