Extjs3.4 带复选框的树结构（Tree+checkbox）案例
框架为struts2
1. jsp页面：
2.categorychecktree.js
其中 json格式：
1. jsp页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>种类指派</title>
<!-- ExtJS library -->
<link rel="stylesheet" type="text/css" href="css/ext/ext-all.css" />
<script type="text/javascript" src="js/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/ext/edittree/categorychecktree.js"></script>
<script type="text/javascript" src="js/ext/edittree/TreeCheckNodeUI.js"></script>
<script type="text/javascript" src="js/ext/examples.js"></script>
<link href="css/ext/ext-patch.css" type="text/css" rel="stylesheet"/>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="css/ext/examples.css" />
<style type="text/css">
.complete .x-tree-node-anchor span {
text-decoration: line-through;
color: #777;
}
.x-tree-node .root{
background-image: url(css/images/default/tree/category.png)
}
</style>
</head>
<body style="padding:0 0 0 ;">
<!-- EXAMPLES -->
<div id="tree-div" ></div>
<input type="hidden" id="name" name="name" value='<s:property value="product.name"/>'/>
<input type="hidden" id="productid" name="productid" value='<s:property value="productid"/>'/>
</body>
</html>
2.categorychecktree.js
/*! * Ext JS Library 3.4.0 * Copyright(c) 2006-2011 Sencha Inc. * [email protected] * http://www.sencha.com/license */ Ext.onReady(function(){ var tree = new Ext.tree.TreePanel({ renderTo:'tree-div', // title: document.getElementById('name').value+'——>指派种类', align:'center', height: 300, width: 400, useArrows:true, autoScroll:true, animate:true, // enableDD:true,拖拽 containerScroll: true, expanded:true, rootVisible: false, checkModel:'single', onlyLeafCheckable:true, frame: true, root: { nodeType: 'async', text:'选择类别' , iconCls:'' },//loader 引用插件TreeCheckNodeUI，实现单选功能 loader: new Ext.tree.TreeLoader({ dataUrl: 'categorycheckjson.action?productid='+document.getElementById('productid').value, baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性 }), buttons: [{ text: '指派种类', handler: function(){ var categoryId = '', selNodes = tree.getChecked(); var productid=document.getElementById('productid').value; if(selNodes.length==0){ Ext.Msg.alert('提示','请选择指派种类'); } Ext.each(selNodes, function(node){ if(categoryId.length > 0){ categoryId += ', '; } // msg += node.text; categoryId += node.attributes['categoryId']; Ext.MessageBox.confirm("确认","确定指派种类吗？",function(e){ if (e == "yes") { //提交到服务器操作 Ext.Ajax.request({ url: 'asignCategory.action', params: {categoryId:categoryId,productid:productid}, method: 'POST', dataType:'json', success:function(form,action){ var obj = Ext.util.JSON.decode(form.responseText); if(obj.success==true) { Ext.Msg.alert('指派成功',obj.msg); var win = parent.Ext.getCmp('win'); if (win) {win.close();} } else { //Ext.Msg.alert('提示',obj.errors); Ext.Msg.alert('指派错误',obj.msg); } }, //提交失败的回调函数 failure:function(){ Ext.Msg.alert('错误','服务器出现错误请稍后再试！'); } }); } else if (e == "no") { // alert("no"); } else if (e == "cancel") { //alert("cancel"); }}); }); } },{ text: '关闭', handler: function(){ var win = parent.Ext.getCmp('win'); // alert(win2); if (win) {win.close();} // window.parent.location.href='roleGrid.action' } }] }); tree.getRootNode().expand(true); tree.root.getUI().getIconEl().src =''; //'js/ext/icons/fam/book.png'; ///////////////////////// });
其中 json格式：
stcCallback1001({totalCount:"8",results:[{productid:"13",name:"考试",companyName:"教育",create_time:"2012-08-06 16:14:32"},{productid:"12",name:"ggg",companyName:"4546",create_time:"2012-08-06 16:13:29"},{productid:"11",name:"3434",companyName:"3444",create_time:"2012-08-06 16:12:44"},{productid:"10",name:"333",companyName:"fff",create_time:"2012-08-06 16:12:02"},{productid:"9",name:"考试",companyName:"教育",create_time:"2012-08-06 16:10:53"},{productid:"8",name:"999",companyName:"教育",create_time:"2012-08-06 16:09:36"},{productid:"7",name:"考试",companyName:"教育",create_time:"2012-08-06 16:08:20"},{productid:"6",name:"学",companyName:"教育",create_time:"2012-08-06 15:50:26"}]});