ExtJS with Simile Timeline

EXTJS with OpenLayers and Map

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.2.1/extjs-build/resources/ext-theme-neptune/ext-theme-neptune-all-debug.css">
<link rel="stylesheet" href="http://api.simile-widgets.org/ajax/2.2.1/styles/graphics.css">
<script src="http://www.simile-widgets.org/timeline/api/timeline-api.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">

JavaScript

Ext.ux.TreeTimeline = function(config) {
	config = config || {};
	Ext.ux.TreeTimeline.superclass.constructor.call(this);
	this.currentAction = null;
	if(config.tree) {
		this.setTree(config.tree);
	}
};

Ext.extend(Ext.ux.TreeTimeline, Ext.ux.Timeline, {

	APPENDING: 'appending',
	INSERTING: 'inserting',
	MOVING: 'moving',
	REMOVING: 'removing',

	// Sets the tree that the timeline listens to
	setTree: function(tree) {

		// If it's already listening to a tree, remove the listeners
		if(this.listening) {
			this.tree.un('beforeappend', this.appendNode.before);
			this.tree.un('append', this.appendNode.add);

			this.tree.un('beforeinsert', this.insertNode.before);
			this.tree.un('insert', this.insertNode.add);

			this.tree.un('beforemovenode', this.moveNode.before);
			this.tree.un('movenode', this.moveNode.add);

			this.tree.un('beforeremove', this.removeNode.before);
			this.tree.un('remove', this.removeNode.add);

			this.tree.un('disabledchange', this.disabledchange.add);
			this.tree.un('textchange', this.textchange.add);
		}

		// movenode still needs to be implemented

		// Listen to the new tree
		this.tree = tree;
		this.tree.on('beforeappend', this.appendNode.before, this);
		this.tree.on('append', this.appendNode.add, this);

		this.tree.on('beforeinsert', this.insertNode.before, this);
		this.tree.on('insert', this.insertNode.add, this);

		this.tree.on('beforemovenode', this.moveNode.before, this);
		this.tree.on('movenode', this.moveNode.add, this);

		this.tree.on('beforeremove', this.removeNode.before, this);
		this.tree.on('remove', this.removeNode.add, this);

		this.tree.on('disabledchange', this.disabledchange.add, this);
		this.tree.on('textchange', this.textchange.add, this);
		this.listening = true;
	},


	appendNode: {

		before: function(tree, parentNode, node) {
			if(!this.currentAction) {
				this.currentAction = this.APPENDING;
			}
		},

		add: function(tree, parentNode, node, index) {
			if(!this.listening || this.currentAction...