`

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构建树形菜单功能

    使用ExtJs构建树形菜单功能,很实用的东西。

    easyui或extjs构建动态树形结构

    easyui或extjs构建动态树形结构,程序详细解析了怎么构建、组织树形结构,代码简单明了,有相应的注释说明,真正的授人予渔.只要你明白程序的逻辑,相信上面两种组件的树形结构,将不会有任何问题。

    extjs动态生成树,绝对能运行产生

    不服老外不行,还是人家实在,贴出来的源码绝对能运行,找了两个晚上找到的。佩服佩服,那些翻译的,每一个能完整的运行,哎。下面是sql CREATE TABLE [dbo].[Employee]( [EmployeeID] [int] IDENTITY(1,1) NOT ...

    EXTJS实用开发指南_个人整理笔记.pdf

    EXTJS提供了许多强大的控件,包括面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。这些控件都是基于EXTJS的底层API(core)构建的,底层API提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础功能。 ...

    Extjs树菜单的构成

    把ext构建树的过程都详细讲述,静动态的树都有,值得参考。

    JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

    在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该...

    Anynote个人信息管理系统 1.3.0.rar

    Anynote是一个基于extjs3.3、struts1.3.10、spring2.5、ibatis-2.3.4构建的个人信息管理系统(支持多用户)。主要功能包括:1、待办事项;2、**常笔记;3、阅读器;4、个人相册;5、账目理财。 Anynote目前最新版本...

    ext js 7.0.0

    ext js 7.0.0 Ext JS提供了业界最全面的高性能,可定制的UI窗口小部件集合,包括HTML5网格,树,列表,表单,菜单,工具栏,面板,窗口等。...使用这些示例为台式机,平板电脑和智能手机构建跨平台应用程序。

    javascript 树控件 比较好用

    构建树控件的比较理想的一种方法是用ul、li这种简单的标签组合来实现,但是你如果想实现复杂一点的比如要节点可编辑、可拖动、可更换风格等等我想ExtJS是最好的选择了。

    fhirbrowser:HL7 FHIR DTSU 1.1 的层次结构和文档浏览器

    此外,从长远来看,我可能会将客户端应用程序移至重量更轻的 Web 框架,但 ExtJs 有一个很好的树控件,可以使开发快速(我现在没有太多时间花在这个上:)。 编译 Web 应用程序安装 安装咖啡脚本: npm install -g ...

    ExtAspNet_v2.3.2_dll

    -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

Global site tag (gtag.js) - Google Analytics