用extjs3 创建一棵树需要注意一点:动态创建树时,返回的树节点应该是一个json数组。
以下是我用exttag创建的树,以及生成后的代码。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="ext" uri="/exttag"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <base href="<%=basePath%>"> <ext:ext title="tree录"> <ext:viewport layout="fit"> <ext:items> <ext:tabPanel activeTab="mytree" > <ext:items> <ext:treePanel id="mytree" layout="fit" frame="true" title="ok" > <ext:asyncTreeNode id="0" text="你好" ></ext:asyncTreeNode> <ext:treeLoader url="/auth/tree.do" dataUrl="/auth/tree.do" ></ext:treeLoader> </ext:treePanel> <ext:panel id="d1222" title="haha " > </ext:panel> </ext:items> </ext:tabPanel> </ext:items> </ext:viewport> </ext:ext>
<base href="http://127.0.0.1:8080/"> <html><head><title>tree录</title><link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><script type="text/javascript" src="ext-3.0.0/src/locale/ext-lang-zh_CN.js"></script></head><body><script type="text/javascript">Ext.onReady(function() {Ext.QuickTips.init();Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); new Ext.Viewport({layout:"fit" ,items: [ new Ext.TabPanel({activeTab:"mytree" ,items: [ new Ext.tree.TreePanel({layout:"fit",id:"mytree",title:"ok",frame:true ,root: new Ext.tree.AsyncTreeNode({text:"你好",id:"0" }) ,loader: treeLoader0 }) ,new Ext.Panel({id:"d1222",title:"haha " }) ] }) ] }) }); var treeLoader0 = new Ext.tree.TreeLoader({dataUrl:"/auth/tree.do?textField=&idField=&leafField=&clsField=&childrenField=",url:"/auth/tree.do?textField=&idField=&leafField=&clsField=&childrenField="});</script><style type="text/css"></style></body></html>
[{"id":1000,"parentid":0,"text":"用户权限","leaf":false,"children":[ {"id":1001,"parentid":1000,"text":"登录","leaf":true,"children":null, "url":"/admin/login.html"},{"id":1002,"parentid":1000,"text":"系统代码配置", "leaf":true,"children":null,"url":"/ecpBaseCode/query/pagelist.html"}], "url":""}]
相关推荐
1. **树形数据结构**:EXTJS的树形控件基于JavaScript对象数组构建,每个节点代表一个对象,包含子节点、文本、图标等属性。例如,`{text: '节点1', children: [{text: '子节点1'}, {text: '子节点2'}]}`。 2. **...
EXTJS是一种基于JavaScript的富客户端应用框架,由Sencha公司开发。它提供了丰富的组件库,用于构建...在实际开发中,还需要结合具体的业务需求和EXTJS的API文档,灵活运用这些知识来构建功能完善的目录树编辑界面。
### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中,树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系,尤其是在展示组织架构、文件系统或者任何有层级结构的...
在CI(持续集成)环境中,ExtJS下拉树可以用于构建配置、依赖管理或者其他需要多级选择的场景。 在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能...
在IT行业中,ExtJS是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件库,包括数据绑定、布局管理、图表以及我们关注的树形视图。"Extjs 无限树菜单 后台拼接json"这个主题涉及到...
3. **复选框配置**:在树节点上添加复选框,可以使用`checkboxModel`配置项。可以设置`threeState`来决定是否支持三态复选(全选、部分选、全不选),以及`checkGroup`来分组复选框,使得同一组内的复选框只能有一个...
总的来说,"Extjs Json树封装"涉及的核心知识点有:JSON数据格式、ExtJS树形组件、树加载器(`JsonTreeLoader`)、可能的自定义插件(`JsonPluginTreeLoader`)以及如何在实际应用中配置和使用它们。理解并熟练运用...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,尤其在创建数据驱动的Web界面方面表现出色。在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单...
EXTJS 4是一款强大的JavaScript框架,用于构建富客户端应用程序。其中,树形表格组件(TreeGrid)结合了树形结构和表格数据展示的功能,能够帮助开发者以更直观的方式展示层次化数据。在EXTJS 4中,树形表格组件不仅...
ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。...你可以根据这些文件来理解和构建自己的ExtJS 4下拉树组件。
ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件库,包括用于创建复杂布局、数据绑定、图表以及我们关注的“动态树”功能。动态树(Dynamic Tree)是指在运行时可以动态加载...
ExtJS 是一个强大的JavaScript库,主要用于构建富客户端应用程序。它提供了丰富的组件库,其中包括树形...总的来说,ExtJS的动态树功能强大且灵活,结合中文API的使用,可以帮助开发者轻松构建出功能丰富的树形界面。
ExtJS 是一个强大的JavaScript 框架,用于构建富客户端应用程序。它提供了丰富的组件库,包括数据绑定、布局管理、图表以及我们今天要讨论的重点——动态树形菜单。动态树加载菜单是 ExtJS 中一种常见且实用的功能,...
ExtJS 是一款强大的JavaScript库,特别适用于构建富客户端应用程序。在本文中,我们将探讨如何实现ExtJS动态树以及其中的节点拖拽功能。动态树是一种能够实时更新和修改的树形结构,允许用户添加、删除和移动节点。...
ExtJS是一款强大的JavaScript框架,主要用于构建富客户端应用。在ExtJS中,下拉树(ComboBoxTree)是一种结合了下拉框和树结构的组件,它允许用户从一个展开的树形列表中选择值,而不是传统的单行文本输入或简单的...
ExtJS4是一个强大的JavaScript框架,用于构建富客户端应用程序。在这个示例中,我们将探讨如何实现一个动态树结构,其中数据是通过Java后端动态获取的。动态树在各种应用程序中非常常见,例如文件系统导航、组织结构...
ExtJS4是一款强大的JavaScript框架,用于构建富...通过这样的方式,我们可以构建一个动态、高效的ExtJS4树结构,仅在需要时加载数据,提升用户体验。同时,这种方式也使得开发者能够更好地控制数据流,降低服务器压力。
ExtJS 动态树结构与Struts框架结合,主要用于构建基于Web的动态树形界面,让用户能够以图形化的方式查看和操作层次结构的数据。在这一过程中,Struts作为MVC框架负责后端业务逻辑处理,而ExtJS则作为前端展示库,...
在这个系统中,你可以看到如何利用ExtJs3的组件库来构建各种用户界面元素,如表格、表单、树形结构以及数据绑定等功能。 首先,让我们深入了解一下ExtJs3的核心特性。ExtJs3提供了一个丰富的组件模型,包括各种UI...
创建一个可编辑的EXTJS树需要以下步骤: 1. **配置TreePanel**:首先,我们需要创建一个TreePanel实例,并为其配置必要的属性,如`rootVisible`(控制是否显示根节点)、`lines`(控制是否显示连接线)和`...