Ext JS Tree with JSON, Java, and Spring

This article describes how to code an EXT JS tree control to display directories and files using Java, Spring, and JSON.

This kicked my ass for more than an hour, so I thought I better post the solution to save someone from the same heart-ache. Unfortunately, I don't have any time left to actually explain this, so you're going to just have to turn your brain on and read between the lines.

The EXT JS Code

The Spring Controller

Here's the controller that will be fired when the dataUrl defined above is requested:

Note that the tree will always send the node id as a request parameter when it makes its async request, so - we are capturing that param. I've programmed the param to be the actual file name so that when we keep clicking on directories in the tree, we'll just call the same controller and keep going deeper and deeper.

There's an annotation that defines the dataUrl:

@RequestMapping(CNST.MY_DATA_URL)

CNST.MY_DATA_URL is a constant in my case. In your case it can be a String equal to the dataUrl you're EXT JS tree is going to call. In other words:

CNST.MY_DATA_URL = '/path/that/initiates/your/controller/goes/here';

Creating the JSON

Now here's how the JSON is created by the FileUtils class:

This produces JSON output that looks like this:

The JSP

I'm using Tiles, so I don't have a bunch of markup in the JSP that delivers the JSON to the requesting tree control. It's dead simple:

The User Interface

In the end, it looks like this:

Each directory node will load asynchronously.

Sorry I didn't spell everything out, but hopefully something in here might make at least one struggling developer's day a little brighter.

Happy coding!