Savory's Sencha Integration Library

Ext JS Trees

Refer to the Savory.Sencha API documentation for more details.

MongoDB Trees

In relational databases, implementing trees efficiently is a pain. MongoDB makes things much easier by allowing us to create documents of any structured depth. Here is a plain old Ext JS TreePanel, with a plain old TreeLoader backed by a MongoDB document. The server-side code:

var tree = new ExtJS.SimpleMongoDbTree({
	collection: 'textpacks',
	field: 'text',
	query: {locale: 'fr'},
	getNodeText: function(id, node) {
		return typeof node == 'string' ? id + ': ' + node : id
	}
})

Pretty easy, no? And here's the result:

One cool extra is that Savory's SimpleMongoDbTree can recognize DBRefs anywhere in the document, and allow Ext JS's tree loader to lazy-load them when the user clicks. This lets you stretch trees across as many MongoDB documents as you like, increasing atomicity for updating them and allowing fine-grained control over performance and user experience.

Try clicking on the cluck.next node to see it load the other document.

Self-Contained Trees

This second tree is "self contained," in that its data is provided as simple JavaScript arrays and dicts that you build or retrieve yourslef. You can provide the unique node IDs yourself, too, as dict keys, or let Savory generate them automatically for you, as in this example:

tree = new ExtJS.SelfContainedTree({
	root: ['HI', {text: 'HI2', children: ['FISH']}]
})

And the widget: