Server
TREE_LOAD想trees提供数据。Ext JS 3.x的Ext.tree.TreeLoader和Ext JS 4.x的类Ext.data.TreeStore调用tree load方法。这个方法必须返回一个树形结果。树节点应该包含id,
text和leaf属性,leaf属性是false或true取决该节点是否还有子节点。
@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; } }
客户端发送到服务器端信息包含id字段,
id字段是客户端必须的。参数的名称必须跟TreeStore的配置参数nodeParam或TreeLoader的配置参数‘nodeParameter‘一致。
第一次客户端会发送一个Id为“root”参数到服务器。服务器端直接返回加载所有直接的子节点。这种方式需要实现按显示需要加载树节点。
一个TREE_LOAD方法必须返回一个对象如果包含根节点,没有根节点必须返回一个集合或数组。
该方法也可以处理其它请求参数。参数必须添加@RequestParam注解如果代码编译时没有带调试信息或函数参数名更请求参数不一致。value属性必须跟请求参数名称一致。如果参数有可能没有属性值,支持默认值或注解@RequestParam必须有值注解,工作方式跟SpringMVC一致。此外,还支持服务器对象参数。
Client Ext JS 3.x
Ext.tree.TreeLoader的职责是从服务器方法加载数据。nodeParameter定义id属性的名称并且必须跟服务器端方法一致。paramsAsHash的值必须为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同过类Ext.data.TreeStore加载tree所需的数据。nodeParameter定义id属性的名称并且必须跟服务器端方法一致。
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, //... });
Examples
http://demo.rasc.ch/eds/extjs3/tree.html
http://demo.rasc.ch/eds/extjs42/tree.html
http://demo.rasc.ch/eds/extjs41/tree.html