`

Ext Tree控件的使用

    博客分类:
  • ext
阅读更多
树是一个我们日常用的组件,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编码发送数据。

分享到:
评论
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,现在学习一下,谢谢分享

相关推荐

    ext TREE

    开发者可以查看这些文件来学习EXT JS Tree的工作机制,或者直接引用它们在自己的项目中使用Tree组件。 在实际应用中,EXT JS Tree组件的使用步骤通常包括以下几个方面: 1. 引入EXT JS库:在HTML文件中添加EXT JS...

    ext 树控件+数据库

    本文将深入探讨如何使用EXT树控件结合JSON数据进行数据传递和显示,以及如何处理EXT树的事件响应。 首先,EXT树控件的工作原理是基于JSON数据进行渲染。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    EXT Tree的简单实践

    6. **代码实践**:`extTree.js` 文件很可能是实现 EXT Tree 的具体代码。在这个实践中,开发者可能定义了一个 TreePanel,并设置了相应的配置项,加载了数据,注册了事件处理器。通过阅读和分析这个文件,可以深入...

    ext tree 分页

    在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...

    EXT 控件拖动例子

    这个设计器可能使用了`Ext.grid.Panel`或`Ext.tree.Panel`来展示可用的控件库,而工作区则使用了某种布局管理器来处理控件的放置。 为了实现控件的拖放,开发者通常还需要处理一些细节,例如: 1. **阻止默认...

    ext3.0所有控件演示代码

    EXT3.0控件的详细使用不仅限于以上几点,还包括树形视图(Tree)、菜单(Menu)、窗口(Window)、对话框(Dialog)、面板(Panel)等组件。每个组件都有丰富的配置选项和事件处理机制,使得EXT3.0能构建出高度定制...

    Ext表格控件和树控件

    ### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...

    ext tree json 例子(不含EXT包)

    "ext tree json 例子(不含EXT包)"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下,仅使用EXT JS中关于TreePanel和JSON解析的部分来构建一个动态的树形结构。这可能涉及到手动引入EXT的核心组件,如...

    ext 级联选择的树形控件

    在提供的压缩包文件"ext-tree"中,可能包含了示例代码、CSS样式和JavaScript文件,用于演示如何创建和使用带有级联选择功能的EXT Tree Panel。通过查看和学习这些文件,你可以了解EXT Tree Panel的配置方法以及如何...

    完成Ext tree 拖拽节点到 textfield 控件中

    以前有许多人需要将 tree 的节点拖拽到其他控件中的问题,前段时间已经解决了,现在也将它的源代码贡献上来。 这个树的数据是静态的,没有做动态的,而且树节点的拖拽也没有做过多的处理,如果要知道怎么样做树...

    Ext tree 结合dwr 调用后台数据

    总结来说,"Ext tree 结合dwr 调用后台数据"是前端与后端高效协作的一种实践方式,通过结合使用Ext JS的Tree组件和DWR,我们可以构建出交互性强、响应速度快的Web应用。理解并掌握这种技术,对于提升Web应用的用户...

    gwt-ext-tree

    在实际开发中,`exttree` 文件可能是这个库的一个示例或者实现文件,包含了使用 GWT-Ext-Tree 创建树形结构的代码。通过对这个文件的学习和理解,开发者可以更好地掌握如何在项目中集成和使用 GWT-Ext-Tree 组件。 ...

    Ext checktree

    "Ext checktree"是基于Ext JS库的一个组件,专门用于创建可勾选的树形控件。在Web应用中,这种控件常用于展现层级结构的数据,并允许用户进行多级选择。下面我们将深入探讨Ext checktree的相关知识点。 首先,我们...

    ext树实例代码

    从给定的文件信息中,我们可以深入探讨“ext树实例代码”这一主题,了解如何在Ext JS中详细应用tree控件。 ### 标题:ext树实例代码 #### 描述:ext中,tree控件的详细应用,实例。 ### 知识点解析: **1. Ext ...

    Ext用户扩展控件-----树形表格

    而"Ext用户扩展控件"则意味着开发人员可能对原生的ExtJS Tree Grid进行了自定义,以满足特定项目的需求,例如增加新功能、优化性能或改进用户界面。 在ExtJS中,Tree Grid的实现通常基于`Ext.tree.Panel`和`Ext....

    Ext.ux.tree.treegrid异步加载

    在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过这种组件,用户可以在一个界面上同时查看数据的层次结构以及具体数据内容。 #### 二、...

    Ext用户扩展控件-------支持树上多个节点和叶子的拖动

    在树控件中实现拖放功能,需要对`Ext.tree.TreeViewDragDrop`或`Ext.tree.TreeDragZone`类进行扩展。这个特定的用户扩展控件,即"UxMutiDragDropTree",则是在原有基础上增加了多选和多节点拖放的能力。 多选功能...

    使用ashx进行XML转Tree的增删改查操作

    但是美中不足就是体积太大,前不久做项目的时候遇到这个问题,恰好发现里面一个压缩过的 Ext.js只有200K,但是已经能够构建一个完整的ExtTree,于是就花了点时间把它改造成一个xml To ExtTree的这样一个小控件,分享...

    js+ext超炫树形控件

    2. **树形控件基础**:树形控件在ExtJS中被称为`Ext.tree.Panel`,它允许用户展开和折叠节点,进行多级深度的浏览。每个节点可以包含任意数量的子节点,并且可以通过图标、文本以及自定义操作来区分。 3. **API ...

    Ext tree build

    它提供了丰富的组件库,其中包括用于显示层次数据的树形控件(Tree)。在本篇文章中,我们将深入探讨如何在Ext JS中构建树结构,以及相关的核心概念和技术。 首先,我们需要理解Ext JS中的树(Tree)组件。...

Global site tag (gtag.js) - Google Analytics