- 浏览: 919225 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (498)
- J2EE (52)
- 数据库 (17)
- java基础 (43)
- web技术 (19)
- 程序设计 (6)
- 操作系统 (18)
- IT资讯 (7)
- 我的IT生活 (12)
- 学习笔记 (9)
- Jquery (25)
- JavaScript (18)
- spring (40)
- Hibernate (12)
- Struts (10)
- YUI (2)
- Extjs (22)
- .net (0)
- Eclipse (10)
- 社会主义 (2)
- 服务器 (9)
- CSS (8)
- 网络安全 (16)
- 版本控制 (9)
- PHP (2)
- Oracle (42)
- SQL server (1)
- Mysql (11)
- 项目管理 (3)
- 开发工具使用 (10)
- SQL语句 (7)
- Perl (0)
- Shell (6)
- 漏洞 (4)
- ibatis (5)
- hacker (2)
- SQL注入 (6)
- Hacker工具 (2)
- 入侵和渗透 (7)
- 插件/组件 (2)
- 最爱开源 (5)
- 常用软件 (2)
- DOS (1)
- HTML (2)
- Android (9)
- CMS (1)
- portal (8)
- Linux (7)
- OSGI (1)
- Mina (5)
- maven (2)
- hadoop (7)
- twitter storm (2)
- sap hana (0)
- OAuth (0)
- RESTful (1)
- Nginx (4)
- flex (1)
- Dubbo (1)
- redis (1)
- springMVC (1)
- node.js (1)
- solr (2)
- Flume (1)
- MongoDB (2)
- ElasticSearch (1)
最新评论
-
M_drm:
请问要怎么设置浏览器才不报没权限呢?
用JS在页面调用本地可执行文件的方法(ACTIVEX) -
Alexniver:
官方文档。When importing data into I ...
mysql导入数据过慢 解决方法 -
camelwoo:
我记得 Criteria 可以做连接查询与子查询,也可以做分页 ...
Hibernate总结篇二 -
zhenglongfei:
楼主如果SubKeyName 这个节点不存在,怎么办??怎么用 ...
Java操作注册表 -
yxx676229549:
用log4j 2 了
logback
小菜使用如下代码生成TreePanel,代码与ExtJs自带的examples类似,在Firefox下运行正常,不过在IE下无法正常显示。
分析问题:
1、是否是xxx.ashx出现异常?
使用Firefox工作正常,所以排除,并且通过Firebug取到xxx.ashx输出json数据如下,所以该可能排除。
[{"id":59,"text":"web development","leaf":false,"children":[{"id":60,"text":"asp.net","leaf":false,"children":[]},{"id":61,"text":"php","leaf":false,"children":[]}]},{"id":62,"text":"web development","leaf":false,"children":[{"id":63,"text":"asp.net","leaf":false,"children":[]},{"id":64,"text":"php","leaf":false,"children":[]}]}]
2、TreePanel不兼容IE?
这显然是个笑话。不过可以验证下,将Firebug取到的json数据放入root结点的children: json。在IE下工作正常。所以该可能排除。
3、TreeLoader在IE下工作不正常?
暂时其它可能排除了,所以就它最可能了。
那怎么解决呢?可以使用Ajax取到xxx.ashx传来的数据,然后转为json放入root结点的children就ok了。试下。
问题解决。。。
不过这样我们又会碰到一个问题,就是当CRUD这个树结点提交到Server后,如何刷新Tree。如果只是重新调用Ajax。会有重复的结点出现。
因为上面使用的是在root下用appendChild来实现。所以刷新时应该先删除root下的所有子结点。怎么删呢?
forumTree.root.removeChildNodes()?噢,sorry。这个方法不存在。简单我们自己来一个。
在刷新的时候只要把forumTree.root传入该方法就可以了。
<script language="JavaScript" type="text/javascript"> <!-- Ext.BLANK_IMAGE_URL = '../resources/ext/resources/images/default/s.gif'; Ext.onReady(function() { var ddTree = new Ext.tree.TreePanel({ el: 'ddTree', useArrows: true, enableDD: true, width: 200, height: 300, loader: new Ext.tree.TreeLoader({ dataUrl: "xxx.ashx" }), rootVisible: false, root: new Ext.tree.AsyncTreeNode({}), listeners: { 'beforeload': beforeloadHandler, 'load': loadHandler } }); ddTree.render(); ddTree.expandAll(); // 展开所有结点 var loading = null; function beforeloadHandler() { // 加载前事件响应处理 loading = new Ext.LoadMask(Ext.get(ddTree.getEl()), { msg: "请等待" }); loading.show(); } function loadHandler() { // 加载后事件响应处理 loading.hide(); } }); --> </script>
分析问题:
1、是否是xxx.ashx出现异常?
使用Firefox工作正常,所以排除,并且通过Firebug取到xxx.ashx输出json数据如下,所以该可能排除。
[{"id":59,"text":"web development","leaf":false,"children":[{"id":60,"text":"asp.net","leaf":false,"children":[]},{"id":61,"text":"php","leaf":false,"children":[]}]},{"id":62,"text":"web development","leaf":false,"children":[{"id":63,"text":"asp.net","leaf":false,"children":[]},{"id":64,"text":"php","leaf":false,"children":[]}]}]
2、TreePanel不兼容IE?
这显然是个笑话。不过可以验证下,将Firebug取到的json数据放入root结点的children: json。在IE下工作正常。所以该可能排除。
3、TreeLoader在IE下工作不正常?
暂时其它可能排除了,所以就它最可能了。
那怎么解决呢?可以使用Ajax取到xxx.ashx传来的数据,然后转为json放入root结点的children就ok了。试下。
<script language="JavaScript" type="text/javascript"> <!-- Ext.BLANK_IMAGE_URL = '../js/ext/images/default/s.gif'; Ext.onReady(function() { var forumTree = new Ext.tree.TreePanel( { el: 'forumtree', useArrows: true, enableDD: true, width: 200, height: 300, rootVisible: false, root: new Ext.tree.AsyncTreeNode({}) }); forumTree.render(); // 加载提示 var loading = null; function showLoading() { loading = new Ext.LoadMask(Ext.get(forumTree.getEl()), { msg: "请等待" }); loading.show(); } function hideLoading() { loading.hide(); } showLoading(); // 由于使用TreeLoader在IE下无法正常加载数据,所以使用Ajax先获取数据再填充数据到root node下 Ext.Ajax.request({ url: 'xxx.ashx', success: function(request) { var data = Ext.util.JSON.decode(request.responseText); forumTree.getRootNode().appendChild(data); forumTree.getRootNode().expandChildNodes(true); hideLoading(); }, failure: function() { hideLoading(); Ext.MessageBox.show({ title: '版块管理', msg: '对不起,加载数据出现异常,请重试!', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); } }); }); --> </script>
问题解决。。。
不过这样我们又会碰到一个问题,就是当CRUD这个树结点提交到Server后,如何刷新Tree。如果只是重新调用Ajax。会有重复的结点出现。
因为上面使用的是在root下用appendChild来实现。所以刷新时应该先删除root下的所有子结点。怎么删呢?
forumTree.root.removeChildNodes()?噢,sorry。这个方法不存在。简单我们自己来一个。
function removeChildNodes(node) { while(node.firstChild) { removeChildNodes(node.firstChild); } if(node.getDepth() != "0") { node.remove(); } }
在刷新的时候只要把forumTree.root传入该方法就可以了。
发表评论
-
UI组件:ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
2013-05-16 13:43 3980UI组件:ext、JqueryEasyUI、miniui、dh ... -
JavaScript大牛:Douglas Crockford
2013-03-28 16:02 854JavaScript大牛:Douglas Crockford ... -
详解Ext + Struts2 文件上传
2012-05-18 10:34 3531前阵子项目里面需要实现文件上传的功能,前后换了包括我在内的三个 ... -
Extjs 中的cookie设置
2012-04-25 17:34 2127发现Extjs中有两个cookie 其一:设置cookie如 ... -
ExtJS column布局后labelField无法显示的问题
2012-04-18 10:43 1997第一次用Extjs的column布局时遇见了很多问题,记录下来 ... -
<转>Extjs中的提示信息用法
2012-04-18 09:43 5017ExtJS.form中msgTarget Ext表单提示 ... -
Extjs表单组件及属性
2012-04-18 09:34 1351Ext.form.Action 配置项: ... -
ext2.0 Ext.MessageBox.confirm 值传递
2012-04-11 10:14 1323function showEditPanel(mID){ ... -
ExtJS 开发总结
2012-03-17 23:19 950http://nything.iteye.com/blog/4 ... -
Ext Theme Builder /Ext 皮肤定制
2011-12-29 14:52 1800Spket 定制皮肤功能: spket 支持定制EXT皮肤功能 ... -
ExtJS Button的事件和方法定义
2011-12-28 12:24 15324ExtJS Button的事件和方法定义: Ext.onR ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-12-27 16:30 2953在使用<input id="file_upl& ... -
ExtJS专题-FormPanel(1)
2011-12-14 14:56 1632OK,前面我们已经学过 ... -
ext TreePanel使用
2011-11-25 21:01 17791. 首先还是主要的显示页面tree.html,这里有两个地方 ... -
ExtJS学习笔记 layout的9种样式风格总结
2011-11-15 14:06 991ExtJS学习笔记 layout的9种样式风格总结 http ... -
extjs中TreeLoader加参数
2011-09-14 14:17 5237/** * 重新加载数据 * @param pa ... -
ExtJS中表单验证使用自定义vtype(两次输入密码重复)示例
2011-02-24 11:28 5225在ExtJS中,使用了四种自定义,分别是'alpha',alp ... -
EXT组件xtype简介
2011-01-04 11:56 1089http://wxg6203.iteye.com/blog/6 ... -
Ext之级联Combox
2010-11-21 01:43 1386/** * 定义store,在baseParams中定义参 ... -
图文详解Ext常见开发工具的安装使用
2010-10-11 21:23 1088图文详解Ext常见开发工具的安装使用 http://www. ...
相关推荐
通过这些配置项和方法,开发者可以构建动态、交互性强的EXTJS TreePanel,实现数据的加载、节点的操作和用户交互。例如,可以设置`rootVisible`为`false`隐藏根节点,使用`loader`配置项定制数据加载逻辑,通过`...
2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. 给节点增加提示信息 9. 为节点设置超链接 10. 编辑节点名称 11. 树形的拖放...
标题“Extjs 动态加载树”涉及到的是一个前端开发技术话题,主要集中在使用Extjs框架构建能够动态加载数据的树形结构。Extjs是一个基于JavaScript的组件化UI库,常用于开发富客户端应用。动态加载树(Dynamic ...
本主题将深入探讨如何在ExtJS中使用DWR的代理(DWRProxy)以及树结构加载器(DWRTreeLoader),以便于在ExtJS组件,特别是树形控件中有效地利用DWR的功能。 首先,让我们了解DWRProxy。DWRProxy是ExtJS中用于与DWR...
4. **load**: 加载数据的方法,可以在此方法中处理数据解析和节点创建。 5. **params**: 发送请求时附带的额外参数。 JSON数据结构对于`TreeLoader`来说非常重要。一个适合树形视图的JSON数据应该包含以下元素: -...
在本文中,我们将深入探讨EXTJS中的树形组件(TreePanel),以及如何创建一个简单的异步加载和拖放功能的示例。EXTJS TreePanel 是一个强大的组件,用于展示层次结构数据,通常用于组织目录、文件系统或组织结构等。...
5. **异步加载**:使用TreeLoader的`load`方法,传入要加载的节点,服务器返回该节点的子节点数据。 6. **服务端接口**:后端需要提供一个接口,接收父节点ID,返回该节点的子节点数据。通常采用JSON格式,每个对象...
TreePanel是ExtJS框架中用于显示树状结构数据的组件,非常适合展示具有层次结构的信息,如文件系统、部门结构等。TreePanel组件可以处理复杂的树形结构,提供展开和折叠节点的功能,使得用户可以逐级浏览数据。 在...
在本文中,我们将深入探讨"Extjs Json树封装"这一主题,包括如何使用JSON数据加载树形结构,以及涉及到的相关工具和源码。 首先,我们需要理解JSON树的概念。在ExtJS中,一个JSON树是由多个JSON对象组成的,每个...
在EXTJS中,TreePanel是用于展示树形数据结构的组件,广泛应用于组织层次结构信息,如文件系统、组织架构等。 **EXTJS TreePanel 知识点** 1. **配置项** - `root`: TreePanel 的根节点,通常是整个树的起点。 -...
TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...
`TreePanel`是Extjs提供的树形控件,`TreeLoader`负责从服务器端加载数据。`dataUrl`属性指定了获取树形结构数据的URL,而`requestMethod`则定义了请求类型。 #### 五、小结 本文介绍了如何在Extjs中实现动态加载...
在JavaScript的ExtJS框架中,TreePanel是一种强大的组件,它用于展示树形结构的数据,尤其适合处理JSON格式的信息。TreePanel允许用户以交互的方式浏览层级化的数据,这在很多应用场景中,如文件系统、组织结构或者...
在IT领域,特别是Web开发中,使用ExtJS创建复杂且交互丰富的用户界面是常见的实践。在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,...
在本文中,我们将深入探讨如何在ExtJS的TreePanel组件中实现动态加载数据。TreePanel是ExtJS库中的一个功能强大的组件,它允许用户以树形结构展示数据。动态加载数据是一种优化用户体验的方法,只有当用户展开节点时...
在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...
在ExtJs中,可以使用`Ext.tree.TreeNode`类来创建节点,并通过`appendChild`方法将子节点添加到父节点下。 ```javascript var root = new Ext.tree.TreeNode({ text: '区域信息' }); var node1 = new Ext.tree....
在IT领域,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套组件,包括表格、树形视图、图表等,帮助开发者创建交互式、功能丰富的用户界面。本篇将深入探讨ExtJS中的"Chekboxtree...
- **异步加载**:通过`Ext.tree.TreeLoader`实现数据的异步加载,其中`dataUrl`指定了获取数据的URL路径。 - **根节点配置**:通过`root`属性指定树的根节点,该节点可配置自己的`text`、`iconCls`和`id`等属性。 #...