环境
Extjs 4.2.1
spring MVC 3.2.12
mybatis 3.2.8
效果图
testTree.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>testTree</title>
<link href="<%=path%>/static/ext-4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<script src="<%=path%>/static/ext-4.2.1/bootstrap.js"></script>
<script src="<%=path%>/static/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var store = Ext.create('Ext.data.TreeStore', {
nodeParam : 'id', //默认的是把id作为node传到后台
//autoLoad: false,
proxy: {
type: 'ajax',
url: '<%=path%>/resource/getListByPU.json',
reader: {
type: 'json',
root: 'extTreeVoList' //json中的根节点
}
},
root: {
text: '根节点',
id: '0',
expanded: true
},
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible:false,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'Files',
useArrows: false,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
/*
//基本树样例
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
*/
});
</script>
</head>
<body>
testTree
<div id="tree-div"></div>
</body>
</html>
ResourceController的方法
@RequestMapping(value = "/getListByPU", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
public List<ExtTreeVo> getListByPU(HttpServletRequest request, HttpServletResponse response, ModelMap model) throws IOException{
//String node = request.getParameter("node");
String id = request.getParameter("id");
Map map = new HashMap();
map.put("parentId", id);
map.put("userId", getUser().getId());
List<Resource> resources = resourceSerive.getListByPU(map);
List<ExtTreeVo> treeVos = new ArrayList<ExtTreeVo>();
ExtTreeVo treeVo;
for(Resource resource : resources){
if(resource.getLeaf()){
treeVo = new ExtTreeVo(resource.getId(),resource.getName(),true,"file");
} else {
treeVo = new ExtTreeVo(resource.getId(),resource.getName(),false,"folder");
}
treeVos.add(treeVo);
}
return treeVos;
}
ExtTreeVo
import java.util.List;
/**
* Ext树vo
* @author happyqing
* @date 2015-4-8
*/
public class ExtTreeVo {
private long id; //节点id
private String text; //文本
private Boolean leaf; //是否是叶子节点
private String cls; //样式
private Boolean expanded; //是否展开
private List children; //子节点列表
public ExtTreeVo() {
}
public ExtTreeVo(long id, String text, Boolean leaf, String cls) {
super();
this.id = id;
this.text = text;
this.leaf = leaf;
this.cls = cls;
}
//getter/sertter...
}
相关推荐
ExtJs4.2没有直接提供下拉树这个组件，但是有例子可以用，文件位置：ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧：默认显示了根节点；达到最小高度时再展开节点，高度不能自动调整。 所以我做了一...
里面有demo以及API说明，可以当工具书以及学习使用
EXTjs4.2中文版是EXTjs框架的一个重要版本，EXTjs是一个强大的JavaScript库，专门用于构建用户界面，尤其适用于创建富互联网应用程序（Rich Internet Applications，简称RIA）。它以其组件化的设计理念，丰富的UI...
01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...
在本实践项目“SpringMVC+ExtJs4.2实例”中，我们将深入探讨如何将SpringMVC框架与ExtJs4.2前端框架相结合，构建一个功能完善的Web应用程序。这个项目旨在展示如何利用这两个强大的技术栈来实现数据的动态交互和用户...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹，其余文件过大并且与主题无关,因此未包含。具体方法，请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
ExtJS 4.2 是一个流行的JavaScript框架，用于构建富客户端Web应用程序。它提供了一套完整的组件库，包括数据管理、图表、表格、菜单、工具栏等，使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...
Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整，最规范的。
根据提供的文件信息，本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法，帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架，用于创建...
综上所述，`ExtJs4.2 下拉框树`的实现涉及到了组件扩展、树形数据处理、界面布局和交互设计等多个方面，通过对`TreePicker.js`的修改，开发者成功地克服了原生框架的限制，提供了更符合需求的下拉树功能。
Extjs4.2入门教程详解，及API文档。
在这个“下拉(条件)搜索实例”中，我们看到开发者利用ExtJS 4.2实现了一个交互式的用户界面，其中包含了下拉菜单和条件搜索功能。 下拉搜索通常指的是在输入框中使用下拉列表作为候选选项的搜索方式，用户可以快速...
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架，其实是个只有大框架的，并没有其他功能，您可能会骂我标题党“通用权限管理系统,通用后台模板”，呵呵，其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
用Ext编写的多文件上传组件，已封装。 支持多文件上传，文件下载，文件删除，
EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架，它结合了MVC（Model-View-Controller）设计模式，为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库，专门用于创建...
extjs 4.2 jsb2 4.2没有自带jsb2文件
ExtJs4.2正式版
标题 "nodejs+extjs4.2+mysql" 暗示了这是一个使用 Node.js、ExtJS 4.2 和 MySQL 数据库构建的项目。这个项目的核心是利用这些技术搭建了一个基本的框架，使得开发者可以方便地在此基础上添加自己的业务逻辑和功能。...