Tree Load Method

Server

A TREE_LOAD provides data for trees. On Ext JS 3.x the Ext.tree.TreeLoader and on Ext JS 4.x the class Ext.data.TreeStore initiate the request to a tree load method. The method then has to return a tree like structure. One object should contain an id, a text and a property leaf that is false or true depending if the node has children or not.

@Service
public class TreeProvider {

  public static class Node {
    public String id;
    public String text;
    public boolean leaf;
  }

  @ExtDirectMethod(value = ExtDirectMethodType.TREE_LOAD, group = "tree")
  public List<Node> getTree(@RequestParam(value = "id", required = false) String id,
      @RequestParam(value = "foo", required = false, defaultValue = "defaultValue") String foo) {

    List<Node> result = new ArrayList<Node>();
    //...
    return result;
  }

}

The client always sends an id field to the server, that contains the node id which the client is interested in. The name of the parameter has to match the config parameter 'nodeParam' from TreeStore or 'nodeParameter' from TreeLoader.

The first time the client will send an id "root" to the server. The server method may only send all the direct children for this node id back. This way a load on demand tree can be implemented.

A TREE_LOAD method has to return a single object if it contains the root node and without the root node it has to return a collection or an array.

The method is also able to handle additional request parameters. Parameters have to be annotated with @RequestParam if the code is not compiled with debug statements on or the name differs from the request parameter name. The value attribute has to match the name of the request parameter. If there is no value attribute the name of the parameter is used. defaultValue and required attribute of the @RequestParam annotation are supported and work the same way as in Spring MVC. Server object parameters are also supported (see Simple Method).

Client Ext JS 3.x

The Ext.tree.TreeLoader is responsible to load the data from the server method. nodeParameter specifies the name of the node id property and has to match the parameter name from the server method. paramsAsHash has to be true.

  myTreeLoader = new Ext.tree.TreeLoader( {
      directFn: treeProvider.getTree,
      nodeParameter: 'id',
      paramsAsHash: true,
      baseAttrs : {
        foo: 'empty'
      }
    });
    
  var tree = new Ext.tree.TreePanel( {
    //...
    root: {
      id: 'root',
      text: 'Root'
    },
    loader: myTreeLoader,
    //...
  });

Client Ext JS 4.x

Ext JS 4.x contains a Ext.data.TreeStore that loads the data for a tree panel. nodeParam specifies the node id name that has to match the name of the parameter on the server side.

var store = Ext.create('Ext.data.TreeStore', {
    nodeParam: 'id',
    proxy: {
      type: 'direct',
      directFn: treeProvider.getTree,
      extraParams: {
        foo: new Date()
      }
    }
  });

  var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    //...
  });