ColumnTree is a user extension component for the popular Javascript library, ExtJS.
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.
As you can imagine, this allows for a broad variety of applications, such as representing a tree structure stored in memory, or polling back to a server side application which can be used to traverse a tree (a perfect example, which you will see in the demo below, is the directory structure of an operating system - in this case, a selected directory of my own server).
Feel free to play with the demo below, or download the source for an example of how to get started using the ColumnTree extension.
Please direct all questions and comments through my mail form contact page.
This is a live demo that actually represents my directory structure at /ext-ux. Feel free to browse it yourself here. Much in the same way that other Ext widgets POST arguments to a server-side application and retrieve results, I employ a PHP script that basically retrieves directory structure for a provided node. The component also has a variety of configuration options, most notably the ability to specify the number of columns:
0.1a - 09/25/07
Intitial alpha release
This component is definitely a work-in-progress. I post these here because the source is always open, and I am a developer with limitless pet projects, so anyone willing to contribute should feel free to do so. The following are some things I'd like to see some day:
* This would be wickedly cool.
| Source Version | Plays Nice With |
|---|---|
| Version 0.1a | Ext 1.0.1a -or- Ext 1.1 Release Candidate 1 |
There are two components to the live demo you see on this page. The first is a simple PHP script, tree.php that provides directory information in a JSON format (for the most curious and mischevious among you, I've omitted key code which prevents you from traversing my entire directory tree):
<?php
if(isset($_POST['root']))
$node = $_POST['root'].'/';
else
$node = '/home/.jalapeno/axisfive/axisfive.net/ext-ux/'; // The default root node
$handle = @opendir($node);
while (false !== ($file = @readdir($handle))) {
if($file != '.' && $file != '..'){
$files[] = array('id' => $node.$file, 'label' => $file, 'leaf' => !is_dir($node.$file));
}
}
@closedir($handle);
if(!$files)
$files = array();
$results = array('total' => count($files), 'results' => $files);
echo json_encode($results);
?>
On the client-side is some Javascript which links to the data source (the PHP file) and parses the JSON into a usable Ext.ux.Store. Of course, this code assumes that you've also imported all of the necessary ExtJS libraries:
...
<head>
<script type='text/javascript'>
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();
});
</script>
</head>
...
...
<body>
...
<div id='tree'></div>
...
</body>
...