Extjs4——向TreeStore中加载数据

这里分别介绍使用JSON本地数据，JSP和XML向TreeStore中加载数据的实现方式

1.本地JSON数据：

注意txt文件中叶子节点一定要加上leaf:true的属性，否则文件会无限展开的

   var tree = new Ext.tree.TreePanel({
        store: new Ext.data.TreeStore({
            proxy: {
                type: 'ajax',
                url: '01-04-02.txt'
            },
            root: {
                text: '我是根'
            }
        })
    });

    tree.render('tree');

01-04-02.txt内容如下：

[
    {text:'01',children:[
        {text:'01-01',leaf:true},
        {text:'01-02',children:[
            {text:'01-02-01',leaf:true},
            {text:'01-02-02',leaf:true}
        ]},
        {text:'01-03',leaf:true}
    ]},
    {text:'02',leaf:true}
]

最后的效果如下：

2.使用JSP提供后台数据：

注意一定要为树形中的节点设置id,不能重复，后台会根据id来判断究竟是哪个节点正在展开，从而返回对应的数据，如果不设置root的ID，Ext会默认根节点的ID为root。

前台代码如下：

    var tree = new Ext.tree.TreePanel({
        store: new Ext.data.TreeStore({
            proxy: {
                type: 'ajax',
                url: '01-05-01.jsp'
            },
            root: {
                text: '我是根'
            }
        })
    });

    tree.render('tree');

后台JSP代码：

<%@ page contentType="text/html;charset=utf-8"%>
<%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");

    // 获得node参数，对应的是正在展开的节点id
    String node = request.getParameter("node");
    System.out.println(node);


    String json = "";
    if ("0".equals(node)) {
        json += "[{id:1,text:'节点阿一'},{id:2,text:'节点阿二'}]";
    } else if ("1".equals(node)) {
        json += "[{id:11,text:'节点阿一一',leaf:false},{id:12,text:'节点阿一二',leaf:true}]";
    } else if ("2".equals(node)) {
        json += "[{id:21,text:'节点阿二一',leaf:true},{id:22,text:'节点阿二二',leaf:true}]";
    } else if ("11".equals(node)) {
        json += "[{id:111,text:'节点阿一一一',leaf:true},{id:112,text:'节点阿一一二',leaf:true}]";
    }

    response.getWriter().print(json);
%>

分析下后台代码：

树形异步读取的关键是node参数，当某个节点展开时，TreeStore会根据设置的url地址去后台读取数据。而当发送请求时，TreeStore会把这个节点的ID作为参数一起发送到后台去。对后台来说，只要获得node参数，就知道是哪个节点正在展开。接着会根据节点的ID返回对应的json数据。

效果如下：

3.XML数据：

 var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: '01-06-01.xml',
            extraParams: {
                isXml: true
            },
            reader: {
                type: 'xml',
                root: 'nodes',
                record: 'node'
            }
        },
        sorters: [{
            property: 'leaf',
            direction: 'ASC'
        },{
            property: 'text',
            direction: 'ASC'
        }],
        root: {
            text: 'Ext JS',
            id: 'src',
            expanded: true
        }
    });

    // create the Tree
    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        hideHeaders: true,
        rootVisible: true,
        viewConfig: {
            plugins: [{
                ptype: 'treeviewdragdrop'
            }]
        },
        height: 350,
        width: 400,
        title: 'Directory Listing',
        renderTo: 'tree',
        collapsible: true
    });

效果如下：

Extjs4——向TreeStore中加载数据

推荐阅读