`

extjs3 树构建

阅读更多

用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":""}]

 

分享到:
评论

相关推荐

    extjs 树 搜索

    1. **树形数据结构**:EXTJS的树形控件基于JavaScript对象数组构建,每个节点代表一个对象,包含子节点、文本、图标等属性。例如,`{text: '节点1', children: [{text: '子节点1'}, {text: '子节点2'}]}`。 2. **...

    extjs目录树编辑

    EXTJS是一种基于JavaScript的富客户端应用框架,由Sencha公司开发。它提供了丰富的组件库,用于构建...在实际开发中,还需要结合具体的业务需求和EXTJS的API文档,灵活运用这些知识来构建功能完善的目录树编辑界面。

    使用ExtJs构建树形菜单功能

    ### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中,树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系,尤其是在展示组织架构、文件系统或者任何有层级结构的...

    extjs下拉树

    在CI(持续集成)环境中,ExtJS下拉树可以用于构建配置、依赖管理或者其他需要多级选择的场景。 在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能...

    Extjs 无限树菜单 后台拼接json

    在IT行业中,ExtJS是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件库,包括数据绑定、布局管理、图表以及我们关注的树形视图。"Extjs 无限树菜单 后台拼接json"这个主题涉及到...

    EXTJS动态树支持checkbox 全选

    3. **复选框配置**:在树节点上添加复选框,可以使用`checkboxModel`配置项。可以设置`threeState`来决定是否支持三态复选(全选、部分选、全不选),以及`checkGroup`来分组复选框,使得同一组内的复选框只能有一个...

    Extjs Json树封装

    总的来说,"Extjs Json树封装"涉及的核心知识点有:JSON数据格式、ExtJS树形组件、树加载器(`JsonTreeLoader`)、可能的自定义插件(`JsonPluginTreeLoader`)以及如何在实际应用中配置和使用它们。理解并熟练运用...

    Extjs下拉多选树

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,尤其在创建数据驱动的Web界面方面表现出色。在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单...

    EXTJS 4 树形表格组件使用示例

    EXTJS 4是一款强大的JavaScript框架,用于构建富客户端应用程序。其中,树形表格组件(TreeGrid)结合了树形结构和表格数据展示的功能,能够帮助开发者以更直观的方式展示层次化数据。在EXTJS 4中,树形表格组件不仅...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。...你可以根据这些文件来理解和构建自己的ExtJS 4下拉树组件。

    extjs实现动态树

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件库,包括用于创建复杂布局、数据绑定、图表以及我们关注的“动态树”功能。动态树(Dynamic Tree)是指在运行时可以动态加载...

    extjs 动态树及中文API

    ExtJS 是一个强大的JavaScript库,主要用于构建富客户端应用程序。它提供了丰富的组件库,其中包括树形...总的来说,ExtJS的动态树功能强大且灵活,结合中文API的使用,可以帮助开发者轻松构建出功能丰富的树形界面。

    extjs实现动态树加载菜单

    ExtJS 是一个强大的JavaScript 框架,用于构建富客户端应用程序。它提供了丰富的组件库,包括数据绑定、布局管理、图表以及我们今天要讨论的重点——动态树形菜单。动态树加载菜单是 ExtJS 中一种常见且实用的功能,...

    Extjs动态树的实现以及节点拖拽

    ExtJS 是一款强大的JavaScript库,特别适用于构建富客户端应用程序。在本文中,我们将探讨如何实现ExtJS动态树以及其中的节点拖拽功能。动态树是一种能够实时更新和修改的树形结构,允许用户添加、删除和移动节点。...

    ExtJs下拉树

    ExtJS是一款强大的JavaScript框架,主要用于构建富客户端应用。在ExtJS中,下拉树(ComboBoxTree)是一种结合了下拉框和树结构的组件,它允许用户从一个展开的树形列表中选择值,而不是传统的单行文本输入或简单的...

    Extjs4动态树的实现

    ExtJS4是一个强大的JavaScript框架,用于构建富客户端应用程序。在这个示例中,我们将探讨如何实现一个动态树结构,其中数据是通过Java后端动态获取的。动态树在各种应用程序中非常常见,例如文件系统导航、组织结构...

    Extjs4树结构异步加载

    ExtJS4是一款强大的JavaScript框架,用于构建富...通过这样的方式,我们可以构建一个动态、高效的ExtJS4树结构,仅在需要时加载数据,提升用户体验。同时,这种方式也使得开发者能够更好地控制数据流,降低服务器压力。

    extjs动态树struts请求数据

    ExtJS 动态树结构与Struts框架结合,主要用于构建基于Web的动态树形界面,让用户能够以图形化的方式查看和操作层次结构的数据。在这一过程中,Struts作为MVC框架负责后端业务逻辑处理,而ExtJS则作为前端展示库,...

    ExtJs3 演示系统

    在这个系统中,你可以看到如何利用ExtJs3的组件库来构建各种用户界面元素,如表格、表单、树形结构以及数据绑定等功能。 首先,让我们深入了解一下ExtJs3的核心特性。ExtJs3提供了一个丰富的组件模型,包括各种UI...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    创建一个可编辑的EXTJS树需要以下步骤: 1. **配置TreePanel**:首先,我们需要创建一个TreePanel实例,并为其配置必要的属性,如`rootVisible`(控制是否显示根节点)、`lines`(控制是否显示连接线)和`...

Global site tag (gtag.js) - Google Analytics