Ext JS, RowExpander and Ajax

Ext JS contains almost everything a body needs. If there's some functionality that's missing there's always the option to create plugins to extend the core functionality.

For example there's a RowExpander plugin that allows you to create details for rows in a grid, which is very neat. The only problem with that is that it needs the details loaded with the parent row which (if you need to perform more exhaustive queries) is bad.

So after googling a bit I've came up with the idea of extending the original plugin so that it allows for loading content from an external source.

The original idea is taken from this old post.

The idea is simple: return a placeholder instead of template, load the content using an Ajax call and store the retrieved content in the placeholder once it arrives.

I needed this plugin to be able to process the content using template as well so there's the "mode" config option which can be set to 'html' (as-returned-by-server) or 'tpl' (which means that the tpl template will receive an object with 2 fields: parent - with the parent record data, and details - with the parsed object or list returned by server).

The example is here

And finally the sources can be downloaded from my Git repository here.