From Learn About the Ext JavaScript Library

Contents 1 Description 2 Usage 3 Changelog 4 Screenshots

Description

This component, largely developed during my recent stay at Optio Software, provides a manageable widget for representing an alternative tree view reminiscent of the Column View interface element found (most notably) in Apple's Finder. The internal structure of the component closely mimics the idealogy behind Ext's own Tree component, and can be used to interact with just about any type of Ext.data.Store.

See the demo for the latest source.

Usage

Ext.onReady(function() {
 
            /* 
             * Here we use an HttpProxy to read in a view of the file system.
             * 
             * This store could potentially read from any source you'd like (in-memory
             * or stored server-side), and a variety of data formats from JSON, XML, 
             * or simple arrays using the variety of DataProxy and DataReader 
             * implementations supplied in Ext.data.
             */
            var ds = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({url: 'tree.php'}),
                reader: new Ext.data.JsonReader({
                    root: 'results',
                    id: 'id'
                }, [
                    {name: 'id'},
                    {name: 'label'},
                    {name: 'leaf'}
                ]),
                id: 'id'
            });
 
            new Ext.ux.ColumnTree({
                store: ds,
                displayField: 'label',
            }).render('tree');
 
            ds.load();
 
});

Changelog

v0.1a Ryan's initial design

Screenshots