- 浏览: 1633464 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
树是一个我们日常用的组件,Ext给我们提供了一个非常好用的树控件,下面让我们看看用Ext创建一颗树是多么容易的。
通过文件生成Tree
data.txt
ajax读取
注意:ajax默认使用utf-8编码格式,所以我们的jsp也要使用utf-8编码发送数据。
<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 但是
我试过换做string 类型的id 不过它的下层节点就显示不出来了
难道是 extjs 定死的么 只能是数字类型?
js 中 Document.getElementById("sss") 这还是可以的呢
引用
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,现在学习一下,谢谢分享
发表评论
-
ExtJS 2 系列教程
2009-02-08 18:23 3318如果大家对JEE的深入研究有兴趣 可以加入Q群:4617650 ... -
[ExtJS2.1教程-7]Tree(树控件)
2009-02-08 18:10 8114树控件: 树是由根节点、叶子节点、非叶子节点(目录节点)组成的 ... -
[ExtJS2.1教程-6]Tip(提示框)
2009-02-08 09:32 8231信息提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时, ... -
[ExtJS2.1教程-5]ToolBar(工具栏)
2009-02-07 09:25 9787面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具 ... -
[ExtJS2.1教程-4]Menu(菜单)
2009-02-04 21:20 9980menu.html <html> < ... -
[ExtJs 2.02]Grid默认选择首行并允许键盘操作
2009-01-23 14:39 4244grid默认选中第一行问题解决了 grid.getSelect ... -
[电子书]LearningExtJS(完整版2.01 en)
2009-01-22 11:11 2369What you will learn from this ... -
[ExtJs 2.02]ajax文件上传
2009-01-21 15:32 7231例子是网上找的,不过是php的 给转成jsp 吧中间遇到的问题 ... -
[ExtJs 2.02]Combobox的使用
2009-01-21 10:51 28681.简单使用: <!DOCTYPE HTML PUB ... -
grid设置某列背景颜色
2009-01-16 10:47 1877css .x-grid-back-red { back ... -
grid设置某行字体颜色
2009-01-16 10:34 3600css代码 .x-grid-record-red ... -
Ext2.0.2用于netbeans的JavaScript的库
2009-01-05 14:39 1719Ext2.0.2用于netbeans的JavaScript的库 ... -
Ext2.1API中文文档
2009-01-04 08:58 2572Ext2.1API中文文档 基本上Ext2系列都实用 需要Ad ... -
[ExtJS2.1教程-3]事件机制
2009-01-02 23:26 3465javascript的事件我们用的最多的就是用于表单验证 现在 ... -
[ExtJS2.1教程-2]组件的使用
2009-01-02 19:09 2681我们还是以alert为例 首 ... -
[ExtJS2.1教程-1]HelloWorld
2009-01-02 14:16 2709ExtJS:一个很强大的ui库 创建一个漂亮的alert &q ... -
ext的一些组件中常用的参数整理
2008-04-15 05:33 2564grid 中的render里的参数: value:当前单元格 ... -
Ext Docs(2.0) 本地化处理,已生成CHM文件了
2008-01-15 16:27 4346ext2 的chm文档 ajaxjs论坛上发现的 不敢独享~~ ...
相关推荐
开发者可以查看这些文件来学习EXT JS Tree的工作机制,或者直接引用它们在自己的项目中使用Tree组件。 在实际应用中,EXT JS Tree组件的使用步骤通常包括以下几个方面: 1. 引入EXT JS库:在HTML文件中添加EXT JS...
本文将深入探讨如何使用EXT树控件结合JSON数据进行数据传递和显示,以及如何处理EXT树的事件响应。 首先,EXT树控件的工作原理是基于JSON数据进行渲染。JSON(JavaScript Object Notation)是一种轻量级的数据交换...
6. **代码实践**:`extTree.js` 文件很可能是实现 EXT Tree 的具体代码。在这个实践中,开发者可能定义了一个 TreePanel,并设置了相应的配置项,加载了数据,注册了事件处理器。通过阅读和分析这个文件,可以深入...
这个设计器可能使用了`Ext.grid.Panel`或`Ext.tree.Panel`来展示可用的控件库,而工作区则使用了某种布局管理器来处理控件的放置。 为了实现控件的拖放,开发者通常还需要处理一些细节,例如: 1. **阻止默认...
EXT3.0控件的详细使用不仅限于以上几点,还包括树形视图(Tree)、菜单(Menu)、窗口(Window)、对话框(Dialog)、面板(Panel)等组件。每个组件都有丰富的配置选项和事件处理机制,使得EXT3.0能构建出高度定制...
### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...
"ext tree json 例子(不含EXT包)"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下,仅使用EXT JS中关于TreePanel和JSON解析的部分来构建一个动态的树形结构。这可能涉及到手动引入EXT的核心组件,如...
在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...
在提供的压缩包文件"ext-tree"中,可能包含了示例代码、CSS样式和JavaScript文件,用于演示如何创建和使用带有级联选择功能的EXT Tree Panel。通过查看和学习这些文件,你可以了解EXT Tree Panel的配置方法以及如何...
以前有许多人需要将 tree 的节点拖拽到其他控件中的问题,前段时间已经解决了,现在也将它的源代码贡献上来。 这个树的数据是静态的,没有做动态的,而且树节点的拖拽也没有做过多的处理,如果要知道怎么样做树...
总结来说,"Ext tree 结合dwr 调用后台数据"是前端与后端高效协作的一种实践方式,通过结合使用Ext JS的Tree组件和DWR,我们可以构建出交互性强、响应速度快的Web应用。理解并掌握这种技术,对于提升Web应用的用户...
在实际开发中,`exttree` 文件可能是这个库的一个示例或者实现文件,包含了使用 GWT-Ext-Tree 创建树形结构的代码。通过对这个文件的学习和理解,开发者可以更好地掌握如何在项目中集成和使用 GWT-Ext-Tree 组件。 ...
"Ext checktree"是基于Ext JS库的一个组件,专门用于创建可勾选的树形控件。在Web应用中,这种控件常用于展现层级结构的数据,并允许用户进行多级选择。下面我们将深入探讨Ext checktree的相关知识点。 首先,我们...
从给定的文件信息中,我们可以深入探讨“ext树实例代码”这一主题,了解如何在Ext JS中详细应用tree控件。 ### 标题:ext树实例代码 #### 描述:ext中,tree控件的详细应用,实例。 ### 知识点解析: **1. Ext ...
而"Ext用户扩展控件"则意味着开发人员可能对原生的ExtJS Tree Grid进行了自定义,以满足特定项目的需求,例如增加新功能、优化性能或改进用户界面。 在ExtJS中,Tree Grid的实现通常基于`Ext.tree.Panel`和`Ext....
在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过这种组件,用户可以在一个界面上同时查看数据的层次结构以及具体数据内容。 #### 二、...
在树控件中实现拖放功能,需要对`Ext.tree.TreeViewDragDrop`或`Ext.tree.TreeDragZone`类进行扩展。这个特定的用户扩展控件,即"UxMutiDragDropTree",则是在原有基础上增加了多选和多节点拖放的能力。 多选功能...
但是美中不足就是体积太大,前不久做项目的时候遇到这个问题,恰好发现里面一个压缩过的 Ext.js只有200K,但是已经能够构建一个完整的ExtTree,于是就花了点时间把它改造成一个xml To ExtTree的这样一个小控件,分享...
2. **树形控件基础**:树形控件在ExtJS中被称为`Ext.tree.Panel`,它允许用户展开和折叠节点,进行多级深度的浏览。每个节点可以包含任意数量的子节点,并且可以通过图标、文本以及自定义操作来区分。 3. **API ...
它提供了丰富的组件库,其中包括用于显示层次数据的树形控件(Tree)。在本篇文章中,我们将深入探讨如何在Ext JS中构建树结构,以及相关的核心概念和技术。 首先,我们需要理解Ext JS中的树(Tree)组件。...