- 浏览: 447738 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
建悦胡:
好文,必须顶
关于系统中使用多个PropertyPlaceholderConfigurer的配置 -
阿毛色色:
感谢!解决问题
关于系统中使用多个PropertyPlaceholderConfigurer的配置 -
fangwei06056115:
...
Maven中指定得AspectJ依赖无法添加得解决方案 -
abc3720:
Dashboard配置系统 是是商业的吗?如果不是发我看一下吗 ...
图示ExtJS商业智能的仪表盘配置系统 - (Season 1) -
maidou80:
的确有帮助 3Q
Ext表单中的combobox回填显示值问题
使用JS生成树形结构的菜单是基于J2EE的B/S系统常用的UI方式。但长期以来的问题是同步(即一次加载整棵树)加载一棵完整的树给前台及后台同时带来压力,由于加载数据及渲染时间过长使用户体验度很低。Ajax的异步数据传输方式是解决此问题的较好方式,即每次只加载一层节点,当需要时才加载下级节点,这样页面无需一次加载解决了此问题。
Ext的TreePanel组件提供了此功能即异步树(asynchronism tree),使用其实现需以下两步:
- 后台数据加载的实现,并以JSON形式提供给前台。
- 前台Ext的Tree组件实现。
实现预览:
1. 首先是JavaBean的节点模型(Tree Node Model):
/** * Method: 异步加载树型结点<br> * Origin Time: 2008-8-15 下午03:56:28<br> * * @author Seraph<br> * @email: seraph115@gmail.com<br> */ public class AsyncTreeNode { private String id; private String text; // 结点显示名称 private boolean leaf; // 是否为叶子结点 private boolean disabled; // 是否可用 private String cls; // 显示的样式,file、folder private String iconCls; // 结点图标样式 private String href; // 点击后时的链接 private String hrefTarget; // 在何frame中显示 private boolean draggable; // 是否可拖拽 // Omit the get and set method ... ... }
数据库中的表结构:
COLUMN_NAME |
DATA_TYPE |
ID | NUMBER |
PARENT |
NUMBER |
TEXT | VARCHAR2 |
LEAF | VARCHAR2 |
DISABLED | VARCHAR2 |
CLS |
VARCHAR2 |
ICON_CLS |
VARCHAR2 |
HREF |
VARCHAR2 |
HREF_TARGET |
VARCHAR2 |
取下级节点的接口定义:
/** * Method: 获取异步加载树型子结点<br> * Author: Seraph<br> * Origin Time: 2008-9-9 下午05:46:02<br> * * @param menuId 当前结点的id * @return 下级节点组成的List */ public List getLowerTreeNodes(String menuId);
数据提供的Spring的Controller:
/** * Method:<br> * Origin Time: 2008-8-15 上午11:07:55<br> * @author Seraph<br> * @email: seraph115@gmail.com<br> */ public class AsyncTreeProviderController extends JsonProviderController { private TreeManager treeManager; public void setTreeManager(TreeManager treeManager) { this.treeManager = treeManager; } protected ModelAndView handleRequestInternal(HttpServletRequest request, HttpServletResponse response) throws Exception { String rootId = request.getParameter("id"); List list = treeManager.getLowerTreeNodes(rootId); super.pushJsonResponse(response, list); return null; } }
此步将查询到的下级结点的List<AsyncTreeNode>转换为JSON数据通过Ajax方式返回给Ext的TreePanel组件用以渲染下级结点。
PS: 推荐使用json-lib来转换javabean为json数据。下面是json-lib的maven的dependency。
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.2.2</version> </dependency>
2. JavaScript的Ext TreePanel组件实现:
/** * async-tree.js Power by YUI-EXT and JSON. * * @author Seraph * @email seraph115@gmail.com */ var AsyncTree = { author: "Seraph", version: "0.1.0" }; // -> Configuration of tree. e.g: CG[1] var CG = { 1: "asyncTreeProvider.do", 2: "async" }; // -> Root-node name in Chinese. e.g: CN[1] var CN = { 1: "菜单", 2: "配置" }; // -> Root-node ID of tree. e.g: ID[1] var ID = { 1: "-1", 2: "-2" }; Ext.onReady(function(){ var Tree = Ext.tree; var myTreeLoader = new Ext.tree.TreeLoader({ url: CG[1] }); myTreeLoader.on("beforeload", function(treeLoader, node) { myTreeLoader.baseParams.id = node.attributes.id; }, myTreeLoader); var tree = new Tree.TreePanel({ el:'tree1', autoScroll:true, autoHeight: true, border: false, animate:true, enableDD:true, rootVisible:false, containerScroll: true, loader: myTreeLoader, root: { nodeType: CG[2], text: CN[1], id: ID[1] } }); tree.render(); tree.getRootNode().expand(); });
发表评论
-
Ext-3.1.0下组件中按钮居中问题的记要
2010-01-13 16:37 4165好久不写Ext的代码了,今天把ext-2.2替换成ext-3. ... -
Ext.Ajax教程,及Get和Post请求的使用拾遗
2009-08-31 14:46 10084感 于Ajax请求的使用为R ... -
图示ExtJS商业智能的仪表盘配置系统 - (Season 1)
2009-08-03 14:23 8947近些天在研究商业智能(BI)的系列产品,如[Analysis] ... -
扩展组件:GroupingView + PropertyGrid = ? (蒙牛版)
2009-06-24 17:39 2922原来: 牛奶 + 豆浆 = 豆奶 ... -
JavaScript反射读取Object属性
2009-06-09 18:12 4596最近需要用到JS的反射机制读取对象属性,类似Java中的自省, ... -
如何模仿iGoogle的界面(How to Mimic the iGoogle Interface)
2009-06-08 11:03 0在此篇文章中我将向你展示怎样创建自定义的窗口界面。完成的产品将 ... -
ExtJS中JSON数据传递乱码的解决
2009-05-20 11:21 4874服务器环境: Jetty 6.1.7 ExtJ ... -
主题:EXT新手建议:建立自己的工具箱(Toolkit)
2009-05-13 13:33 2312我认为学习EXT开发最好的方法是,在真正开发之前,掌握好高 ... -
基于ExtJS-2.2实现的Ajax登录页面
2009-05-12 16:23 11912最近对Acegi的改造比较感兴趣,所以基于Acegi和ExtJ ... -
基于Acegi实现的Ext权限系统 - 登录部分(含效果图)
2009-05-12 16:15 2664明天将会完成此文,Sorry -
Ext已验证Xtype列表
2009-05-06 11:18 1456This is the list of all valid x ... -
改进EXT提供的Portal组件,自定义最小化最大化按钮
2008-11-21 16:07 4537使用EXT来实现项目的UI,项目中的首页需要一个类似Porta ... -
Ext扩展TriggerField实现唯一值校验
2008-11-03 16:33 1804为了验证输入域的值为唯一值,扩展了Ext.form.Tirgg ... -
使用Ext的ajax请求程序范例
2008-10-09 15:58 1518This is the programming paradig ... -
基于Ext同步加载tree的实例
2008-09-26 14:10 4656基于Ext的TreeNode实现的tree有两种方式加载:一种 ... -
Grid中使用的Combobox
2008-08-28 18:13 4430Ext的Grid中使用combobox做为编辑控件时,遇到在c ... -
Ext表单中的combobox回填显示值问题
2008-08-28 17:36 10574缘由:在基于Ext构建的表单(form)中使用了Combobo ... -
如何将服务器返回的Json值填入到EXT的Form中 (双语版)
2008-08-27 13:49 3461如何将服务器返回的json数据自动回填到我的form里头去?想 ... -
Ext中初始化配置项iconCls的使用方法
2008-08-12 17:42 4124使用过Ext(http://www.extjs ... -
Ext中图标受损或图表显示不完整问题解决
2008-08-07 14:54 2920在Ext引用页面中加入红色部分的空白占位图标即可解决此问题。 ...
相关推荐
### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...
7. **加载和异步操作**:EXT Tree支持懒加载,即只有在需要时才从服务器请求子节点数据,这通过`loader`配置实现。异步加载减少了初始页面加载的时间。 8. **扩展和插件**:EXT Tree有丰富的扩展和插件,如`...
`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...
在客户端,我们需要创建一个EXT TreePanel实例,并设置其配置项。这些配置项包括但不限于: 1. `root`:定义树的根节点,可以是一个包含数据的对象,或者一个函数,用于动态加载数据。 2. `loader`:加载器配置,...
这些文件很可能是用来演示如何创建和操作 Ext Tree 的实例。 首先,让我们了解 Ext Tree 的基本概念。Ext Tree 是一个可交互的、具有拖放功能的树形视图,可以用来显示数据的层级关系。每个节点(TreeNode)都可以...
通过`loader`配置项,可以指定一个`Ext.data.TreeLoader`实例,该实例负责根据需要动态加载节点数据。 7. **Drag and Drop**: `TreePanel`支持拖放操作,允许用户重新排列节点或执行其他基于拖放的操作。这需要配置...
这份"EXT 中文手册 用实例来说话"是EXTJS初学者和开发者的重要参考资料,它通过实例化的方式深入浅出地讲解EXTJS的核心概念和技术。 EXTJS 的核心组件包括窗口(Window)、面板(Panel)、表格(Grid)、表单(Form...
EXT_JS是一种基于JavaScript的开源富客户端框架,专为构建交互式、数据驱动的Web应用程序而设计。EXT JS的核心是EXT Core,它提供了一套高级的DOM操作和事件处理功能。EXT JS实例通常包括一系列预定义的组件、布局、...
要使用`Ext.ux.tree.PagingTreeLoader`,你需要配置一个`TreePanel`,并设置其`loader`属性为`PagingTreeLoader`实例。这个加载器需要与一个支持分页的服务器端接口配合,该接口能够根据请求的页码和每页大小返回...
4. **动态加载数据**:如果你的数据量很大,可以采用异步加载,即在节点被展开时才加载其子节点数据。这可以通过配置store 的proxy 和model 来实现。 5. **自定义节点模板**:EXTJS 允许你自定义节点的展示样式,...
7. **异步与同步加载**:EXT树支持异步和同步两种加载方式。异步加载更常见,它在后台进行,不会阻塞用户界面。同步加载则会等待数据加载完成后再更新界面,一般只在数据量较小或有特定需求时使用。 8. **优化技巧*...
**Ext Tree Panel 实例详解** 在Web开发中,Ext JS是一个强大的JavaScript库,它提供了丰富的用户界面组件,其中Tree Panel是用于展示树形结构数据的重要组件。本文将深入讲解`Treepanel`的使用,包括其基本概念、...
例如,EXT Grid允许你创建数据密集型表格,EXT Form提供了一套完整的表单控件,EXT Tree则用于展示层次结构的数据。 2. **布局管理**:EXT的布局系统允许你灵活地组织组件,适应不同的屏幕尺寸和需求。常见的布局有...
1. 基于组件的架构:Ext3.0采用模块化设计,每个UI元素都是一个独立的组件,如面板、表格、表单等,方便复用和组合,提高了开发效率。 2. 强大的数据绑定:通过Data Package,Ext3.0支持与后台数据的双向绑定,能够...
如果是URL,则通过`Ext.data.HttpProxy`异步加载XML数据,并在数据加载完成后构建树形结构。 ##### 步骤三:从XML元素构建树节点 ```javascript function treeNodeFromXml(XmlEl) { var t = ((XmlEl.nodeType == 3...
这个包是在之前包的基础上多加了很多功能。 原来的内容: 1ext2.2源码及例子 2深入浅出extJs例子 3自己写的例子 ...3新增EXT异步加载树 4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图编辑器
5. **树形视图(Tree)**:EXT JS提供了树形结构的组件,可以用于展现层级关系的数据,支持节点的展开、折叠、拖放等操作。 6. **图表(Charts)**:EXT JS 3.2.1包含了一套图表组件,支持折线图、柱状图、饼图等...
EXT TreeFilter插件是EXT库中的一个强大工具,主要用于增强EXT的Tree组件的功能,特别是针对树形结构数据的快速搜索和过滤。EXT Tree是EXT框架中用于展示层次结构数据的组件,它通常用于构建具有多级目录结构的应用...
本文将深入探讨如何基于Ext4.2版本实现一个简单的TreePanel demo,结合数据库进行后台的数据操作,包括增、删、改、查功能。这对于初学者来说是一个很好的起点,能够帮助理解如何将前端UI与后端数据服务相结合。 ...
4. **创建树形菜单**:接下来,创建一个`Ext.tree.Panel`实例,指定store和root配置。`rootVisible`参数决定是否显示根节点,`displayField`则是显示节点时使用的字段: ```javascript var tree = new Ext.tree....