- 浏览: 154599 次
- 性别:
- 来自: 北京
最新评论
-
科小新:
99999999999999999
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒 -
ldl_xz:
http://www.9958.pw/post/css_pos ...
兼容ie6、ie7、ff的css顶端固定位置定位 -
snnosnno:
有浏览器差异吖
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒 -
lian819:
感谢无私分享了, 必须赞一个啊
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒 -
Sweetme:
放进项目就行了,成功了。谢谢哦怒赞
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒
仿照官网例子:XmlTreeLoader做的,下面有实例
注意:html文件的库引用请自行解决
这个要看情况吧,如果是死的层次结构我把层次信息存在数据库敢问有合不妥?
我在ie6下测试了你的代码,没有发现任何问题啊,用不着加什么监听事件,出现loadexception可能是你在哪儿重复加载数据了吧
当然,这里的树采用异步方式加载,直接用浏览器打开文件是无法向后端发起请求的,你需要配置一个web环境(譬如tomcat、IIS、jetty等)再通过url方式访问
注意:html文件的库引用请自行解决
/** * 通过读取JSON串生成树的层次结构,务必保证json数组中结点出现次序与树完全展开时一致! * (通过后台对编码进行排序来完成) * JSON串根节点默认为'list' * 父结点id字段为 * * 注意: * 1.因为是一次加载全部结点,节点数过多的话将严重影响性能,此时请使用异步加载! * 2.结点的id属性对应json中code属性,结点text属性对应json中name属性。 * 3.根节点的直接子节点的parentcode字段为null或者空字符串都可以 * * v1.1改动: * 1.不再需要leaf属性!一个结点是否为叶子结点将基于json中下一个结点是否为其子节点来判断! * 本特性将提高转变叶子节点为父节点的操作效率,此时你在界面上给一个叶子结点添加一个子节点 * 不用再修改叶子结点在后台的leaf属性,你要做的只是保证返回json中的编码规范以及出现次序。 * 2.如果你设置了leaf属性则此属性将被忽略 * * @author chemzqm@gmail.com * */ Ext.ns('Ext.ux.tree'); Ext.ux.tree.JsonTreeLoader = Ext.extend(Ext.tree.TreeLoader, { root: 'list', paramName: { parentcode: 'parentcode', id: 'code' }, // private override processResponse: function(response, node, callback){ var json = response.responseText; var array = Ext.decode(json)[this.root]; try { node.beginUpdate(); node.appendChild(this.parseArray(array)); node.endUpdate(); if (typeof callback == "function") { callback(this, node); } } catch (e) { this.handleFailure(response); } }, // private parseArray: function(array){ var pnodes = []; var nodes = []; for (var i = 0; i < array.length; i++) { var o = array[i];//判断是否叶子结点 if(array[i+1]&&array[i+1][this.paramName.parentcode]==o[this.paramName.id]){ o.leaf = false; }else{ o.leaf = true; } var treeNode = this.createNode(o); if (!o[this.paramName.parentcode]) { nodes.push(treeNode); } else { for (var j = pnodes.length - 1; j >= 0; j--) { if (pnodes[j].id == o[this.paramName.parentcode]) { pnodes[j].appendChild(treeNode); break; } } } if (!treeNode.leaf) { pnodes.push(treeNode); } } return nodes; }, // private override node的id是json里面的code字段 createNode: function(o){ var attr = { id: o.code, text: o.name }; Ext.applyIf(attr, o); attr.loaded = true; this.processAttributes(attr); return Ext.ux.tree.JsonTreeLoader.superclass.createNode.call(this, attr); }, /* * Template method intended to be overridden by subclasses that need to provide * custom attribute processing prior to the creation of each TreeNode. This method * will be passed a config object containing existing TreeNode attribute name/value * pairs which can be modified as needed directly (no need to return the object). */ processAttributes: Ext.emptyFn }); //backwards compat Ext.ux.JsonTreeLoader = Ext.ux.tree.JsonTreeLoader;
- JsonTreeLoader1.1.rar (17.5 KB)
- 下载次数: 296
评论
7 楼
chemzqm
2010-05-12
joehe 写道
这样设计是不好的,不要把数据组织放到服务端
这个要看情况吧,如果是死的层次结构我把层次信息存在数据库敢问有合不妥?
6 楼
joehe
2010-05-12
这样设计是不好的,不要把数据组织放到服务端
5 楼
chemzqm
2010-04-29
air831 写道
我知道问题的原因了,
"url": "Main.ASPX/Login/",
"name": "管理信息系统",
"code": "0",
"leaf": false,
"parentcode": "-1" --------------根节点的parentcode必须要等于" "
在firefox中显示正常,但是在IE中无法加载,查了下,说是因为“Ext.tree.TreePanel 在IE下不正常加载”
需要加上监听,有其他什么好办法吗?
listeners: {
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node); //不停的加载,直到true
}
}
"url": "Main.ASPX/Login/",
"name": "管理信息系统",
"code": "0",
"leaf": false,
"parentcode": "-1" --------------根节点的parentcode必须要等于" "
在firefox中显示正常,但是在IE中无法加载,查了下,说是因为“Ext.tree.TreePanel 在IE下不正常加载”
需要加上监听,有其他什么好办法吗?
listeners: {
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node); //不停的加载,直到true
}
}
我在ie6下测试了你的代码,没有发现任何问题啊,用不着加什么监听事件,出现loadexception可能是你在哪儿重复加载数据了吧
4 楼
air831
2010-04-29
我知道问题的原因了,
"url": "Main.ASPX/Login/",
"name": "管理信息系统",
"code": "0",
"leaf": false,
"parentcode": "-1" --------------根节点的parentcode必须要等于" "
在firefox中显示正常,但是在IE中无法加载,查了下,说是因为“Ext.tree.TreePanel 在IE下不正常加载”
需要加上监听,有其他什么好办法吗?
listeners: {
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node); //不停的加载,直到true
}
}
"url": "Main.ASPX/Login/",
"name": "管理信息系统",
"code": "0",
"leaf": false,
"parentcode": "-1" --------------根节点的parentcode必须要等于" "
在firefox中显示正常,但是在IE中无法加载,查了下,说是因为“Ext.tree.TreePanel 在IE下不正常加载”
需要加上监听,有其他什么好办法吗?
listeners: {
"loadexception": function(loader, node, response) {
node.loaded = false;
node.reload.defer(10, node); //不停的加载,直到true
}
}
3 楼
air831
2010-04-29
这次我配置了WEB环境,数据库返回的Json为以下格式,但是还是无法显示树
返回的Json
{
"menu": [
{
"url": "Main.ASPX/Login/",
"name": "管理信息系统",
"code": "0",
"leaf": false,
"parentcode": "-1"
},
{
"url": "Task.ASPX/Index",
"name": "任务查询",
"code": "1",
"leaf": true,
"parentcode": "0"
},
{
"url": "BaseInfo.ASPX/Index",
"name": "基础资料",
"code": "2",
"leaf": true,
"parentcode": "0"
}
]
}
生成树JS
var menu = new Ext.tree.TreePanel({
title: '功能菜单',
region: "west",
autoScroll: true,
enableTabScroll: true,
collapsible: true,
collapsed: false,
split: true,
rootVisible: false,
loader: new Ext.ux.tree.JsonTreeLoader({//这里配下就行了
root: 'menu',
dataUrl: contextpath + 'Main.ASPX/GetMenuTree'
}),
root: new Ext.tree.AsyncTreeNode()
});
返回的Json
{
"menu": [
{
"url": "Main.ASPX/Login/",
"name": "管理信息系统",
"code": "0",
"leaf": false,
"parentcode": "-1"
},
{
"url": "Task.ASPX/Index",
"name": "任务查询",
"code": "1",
"leaf": true,
"parentcode": "0"
},
{
"url": "BaseInfo.ASPX/Index",
"name": "基础资料",
"code": "2",
"leaf": true,
"parentcode": "0"
}
]
}
生成树JS
var menu = new Ext.tree.TreePanel({
title: '功能菜单',
region: "west",
autoScroll: true,
enableTabScroll: true,
collapsible: true,
collapsed: false,
split: true,
rootVisible: false,
loader: new Ext.ux.tree.JsonTreeLoader({//这里配下就行了
root: 'menu',
dataUrl: contextpath + 'Main.ASPX/GetMenuTree'
}),
root: new Ext.tree.AsyncTreeNode()
});
2 楼
chemzqm
2010-04-26
air831 写道
请问,测试过吗?
为什么我下载例子后树无法显示出来?
为什么我下载例子后树无法显示出来?
当然,这里的树采用异步方式加载,直接用浏览器打开文件是无法向后端发起请求的,你需要配置一个web环境(譬如tomcat、IIS、jetty等)再通过url方式访问
1 楼
air831
2010-04-23
请问,测试过吗?
为什么我下载例子后树无法显示出来?
为什么我下载例子后树无法显示出来?
发表评论
-
[翻译]Ex4t教程:Ext4起步
2012-02-23 21:58 01.1 浏览器 Ext JS 4 supports a ... -
[Ext入门]如何学习Ext
2010-05-29 19:26 2751国内使用Ext的可谓不少,但是多数也只限与使用其中示例,真能把 ... -
[Ext重写]必填项的label后面加星号
2010-05-20 15:49 3243Ext.form.TextField.override({ ... -
[Ext重写]限制树的深度
2010-05-19 00:51 1915以前做政府项目的时候经常涉及行政区划的树,这个树有的时候要显示 ... -
[Ext源码]Ext的核心方法
2010-05-07 01:17 1587Ext.extend方法: extend : functi ... -
[Ext插件]QM.plugin.MutilTreeFilter:为树添加过滤、展开、收缩功能
2010-05-01 19:48 3645先来看看Ext的官方API的左上角 本插件基于Ext3.0 ... -
[Ext入门]图文详解Ext常见开发工具的安装使用
2010-04-27 21:28 4776俗话说,工欲善其事,必先利其器。缺乏好的工具想要用好Ext这么 ... -
[Ext扩展]动态分页大小、动态grid高度、本地数据分页三合一
2010-04-27 02:53 6373Ext.ux.plugins.PageComboResizer ... -
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒
2010-04-26 22:55 21739为方便大家使用,我把控件所需的js、css、gif文件都提取出 ... -
[Ext扩展]QM.ui.TreeCombo:多功能下拉树列表,内含文档与示例
2010-04-26 20:12 5998有句老话叫不重复造轮 ... -
[Ext扩展]QM.ux.TreeFilter:树节点智能过滤,添加中文模糊匹配功能
2010-04-26 18:24 5815Ext自带一个Ext.tree.TreeFilter类,可以实 ... -
[组件用法]Ext.state.Manager对组件状态进行管理
2010-04-20 01:44 4925Ext.state.Manager存在的意义:简单说就是在客户 ... -
[Ext插件]PinyinFilter:使用拼音首字母对数据进行过滤
2010-04-19 00:37 3996这个插件的目的在于提高用户对于数据的选择效率。经常录入数据的人 ... -
[Ext扩展]根据后台json生成左侧导航菜单,5月9日更新1.1版本
2010-04-16 03:39 4988文章内不再提供示例,需要查看者请从SVN下载,地址: http ... -
[Ext扩展]MenuToolbar:根据json串生成多级菜单
2010-04-14 20:16 3776注意:html文件的Ext库引用请自行解决,效果图: ... -
[组件用法]Ext.History用法要点
2010-04-14 01:11 2597在我的单页面试了下这个类的用法,发现这个类还是比较特殊的。 说 ... -
拒绝iframe嵌套,ajax方式轻松实现单页面
2010-04-13 00:00 6252以前单位做的项目都是上面一排菜单按钮,每点击一次按钮下面工作区 ... -
[Ext源码解读]事件的注册、添加与触发是如何实现的
2010-04-11 01:49 2174Ext提供了一套强大的事件处理机制,每个组件都有许多事件,用户 ... -
为Ext.Msg添加一个ghost提示的方法
2010-04-05 19:43 2074总觉得的老用alert的方式打断用户操作是非常不好的做法,调用 ... -
Ext.TreeNodeCascade让所有Ext的树支持级联选中
2010-04-05 04:15 6087运用了单例模式,使用的话直接让页面文件引用即可。该程序不直接关 ...
相关推荐
利用Ext实现静态树(一次加载所有节点的树) 在今天的IT行业中,树形结构是一种非常常见的数据结构,尤其是在Web应用程序中。在这种情况下,我们通常会遇到一个问题,即如何将树形结构的数据加载到前台,以便用户...
在这个场景下,"异步加载树"是指树形组件(Tree Panel)不一次性加载所有节点,而是根据用户滚动或展开节点时按需加载数据,从而提高页面性能。 EXT JS的Tree Panel允许开发者配置异步加载数据源,通常通过Ajax请求...
ExtJS是一种基于JavaScript的UI库,它为Web...总之,"Ext1.1中文文档"对于想要学习和使用ExtJS的开发者来说是一份宝贵的资料,虽然可能在阅读上存在一定的挑战,但通过努力,可以全面掌握这一强大的JavaScript UI库。
然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要源于GridPanel的生命周期管理和内存管理机制。为了解决这个问题,我们需要深入理解Ext JS的...
在IT行业中,"ext扩展 延时加载"是一个关于前端开发的重要概念,特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库,用于构建数据驱动的富客户端应用程序。延时加载(Lazy Loading)是一种优化...
4. **动态加载(Lazy Loading)**:动态加载是一种优化策略,只在需要时加载数据,而不是一次性加载所有数据。在树结构中,这通常意味着当用户展开一个节点时,才请求并加载其子节点。这减少了初始页面加载时间,...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...
这份API文档是开发者理解和掌握EXT1.1版本核心功能的关键工具。 首先,EXT1.1 API文档详细阐述了EXT库中的各个类和方法,涵盖了从基础组件到高级组件的完整体系。开发者可以通过查阅文档了解如何创建窗口(Windows...
这里定义了一个`TreePanel`,它使用`AsyncTreeNode`作为根节点,并配置了异步加载器(`TreeLoader`),该加载器指向了一个XML文件,该文件包含了树形菜单的具体数据。 #### 4. 添加链接及事件处理 为了让树形菜单中...
这样的结构在处理大型数据集时尤为有用,因为一次性加载所有数据可能会导致页面加载缓慢。 JSON是JavaScript Object Notation的缩写,是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在...
`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...
即:Ext.window 4.mainPage.html为tab布局,右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-...
这种机制对于大型数据集尤其有用,因为它避免了一次性加载所有数据导致的性能问题。 源码中可能包括以下几个关键部分: 1. **TreePanel配置**:首先,我们需要创建一个`TreePanel`实例,设置其配置项,如`...
在Ext JS中,异步加载是一种常见的数据处理方式,尤其在构建动态的用户界面时非常有用。本篇文章主要探讨了如何在异步加载的场景下,实现树形控件(TreePanel)中节点的动态添加、删除以及ComboBox选择项的修改。 ...
Ext.NET 1.1 是一个基于.NET Framework的JavaScript库,专为开发人员提供构建富互联网应用程序(RIA)的工具。这个版本的更新主要是为了增强其对Internet Explorer 9的兼容性,同时也引入了新的Coolite功能,使得...
在大型应用中,这种特性尤为重要,因为它可以提高页面的加载速度,只在用户需要时才加载相关的树节点数据,而不是一次性加载所有数据。这种异步加载通常通过Ajax请求实现,能显著减少初始页面的加载时间,并且优化...
一个Ext树由节点(Nodes)构成,这些节点可以是叶子节点(没有子节点)或父节点(有子节点)。每个节点都有唯一的标识符,并可以携带额外的数据。节点间的关系通过层级关系建立,形成了树状结构。 创建Ext树的第一...
这种动态加载功能对于处理大量数据或层次结构复杂的数据集非常有用,因为它可以避免一次性加载所有数据导致页面响应变慢的问题。用户可以逐级展开节点,只加载当前需要显示的数据,从而提高用户体验。 树形结构的...
"ext1.1帮助文档"是针对一个名为"ext1.1"的软件或库的官方指导材料,它提供详尽的信息,帮助用户理解和使用这个技术。EXT在这里可能指的是一个JavaScript框架,如Ext JS,这是一个广泛用于构建富互联网应用程序(RIA...
本示例将详细介绍如何在EXT中加载数据,特别是通过EXT的Treepanel来呈现一个生成的树形结构。 首先,我们要理解EXT Treepanel。Treepanel是EXT中用于展示层次结构数据的组件,它可以用于创建多级目录、组织结构图等...