Ext Tree控件的使用

llying

浏览: 1633474 次
性别:
来自: 长春

最近访客更多访客>>

lcrxiaomei

kristy_yy

ldb621

huangdj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT Ajax JSP HTML

树是一个我们日常用的组件，Ext给我们提供了一个非常好用的树控件，下面让我们看看用Ext创建一颗树是多么容易的。

 <script>
Ext.onReady(function(){

    var tree = new Ext.tree.TreePanel({
        el:'tree'
    });

    var root = new Ext.tree.TreeNode({text:'root'});
    var node1 = new Ext.tree.TreeNode({text:'catalog'});
    var node2 = new Ext.tree.TreeNode({text:'catalog1_leaf'});
    var node3 = new Ext.tree.TreeNode({text:'root_leaf'});
    node1.appendChild(node2);
    root.appendChild(node1);
    root.appendChild(node3);

    tree.setRootNode(root);
    tree.render();


    root.expand();
//可以有两个参数

});
        </script>
    </head>
    <body>
        <div id="tree" style="height:800px;"></div>
    </body>
</html>

通过文件生成Tree

Ext.onReady(function(){

    var tree = new Ext.tree.TreePanel({
        el: 'tree',
        loader: new Ext.tree.TreeLoader({dataUrl: 'data.txt'})
    });

    var root = new Ext.tree.AsyncTreeNode({text:'root'});

    tree.setRootNode(root);
    tree.render();

    root.expand();
});

data.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}
]

ajax读取

Ext.onReady(function(){

    var tree = new Ext.tree.TreePanel({
        el: 'tree',
        loader: new Ext.tree.TreeLoader({dataUrl: 'data.jsp'})
    });

    var root = new Ext.tree.AsyncTreeNode({
        id: '0',
        text:'root'
    });

    tree.setRootNode(root);
    tree.render();

    root.expand(false, false);
});

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

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

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

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

注意：ajax默认使用utf-8编码格式，所以我们的jsp也要使用utf-8编码发送数据。

分享到：

java创建系统托盘实现(swt和jdk6分别实现) | 金山词霸2009牛津版优惠活动

2008-12-21 19:35
浏览 19724
评论(5)
查看更多

5 楼 dcw650 2011-08-28

还行吧！！！

4 楼 JavaLanguageFun 2010-01-01

SQ，一直找不到Ext3.1的例子 /

3 楼 nishijia 2009-08-21

请问下我用了你的ajax调用 tree 但是

引用

content += "[{id:111,text:'节点阿一一一',leaf:true},{id:112,text:'节点阿一一二',leaf:true}]";

为什么必须都是int型？为什么不可以是String呢
我试过换做string 类型的id 不过它的下层节点就显示不出来了
难道是 extjs 定死的么只能是数字类型？
js 中 Document.getElementById("sss") 这还是可以的呢

2 楼 yuanqixun 2009-07-27

谢谢搂主的分享

1 楼 yiluxiangbei 2009-02-26

我也是要用到这个tree，现在学习一下，谢谢分享

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论