今天在学ExtJS里tree的相关操作,有不足之处,请见谅。
代码是最好的学习,我把代码贴上:
js代码:
/**
* @author WMS_WIN8
*/
Ext.onReady(function() {
var context = new Ext.menu.Menu({
floating : true,
items : [{
text : '刷新'
}, {
text : '关闭'
}]
});
var store = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : 'TreePanel/data.jsp'
},
root : {
expanded : true,
text : '设计树状结构布局',
id : 'root'
}
});
var tree = Ext.create('Ext.tree.Panel', {
title : 'Simple Tree',
// width : 200,
// height : 150,
autoShow : true,
animate : true,
store : store,
rootVisible : true,// 是否显示根节点
listeners : {
"itemclick" : function(node, value) {
console.log(value.data.text);
},
"select" : function(th, record, index, eOpts) {
console.log(record.data.id + "\n"
+ record.data.text + "\n" + index);
},
'itemcontextmenu' : function(menutree, record, items, index, e) {
e.preventDefault();
e.stopEvent();
context.showAt(e.getXY());
}
},
renderTo : Ext.getBody()
});
});
请求文件:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String node = request.getParameter("node");
StringBuffer tree = new StringBuffer();
if(node.equals("root")){
tree.append("[");
tree.append("{id:'wms1',text:'TreePanel的基本使用',leaf:false},");
tree.append("{id:'wms2',text:'树的事件',leaf:true},");
tree.append("{id:'wms3',text:'右键菜单',leaf:true}");
tree.append("]");
}else if(node.equals("wms1")){
tree.append("[");
tree.append("{id:'wms4',text:'创建一颗树',leaf:true},");
tree.append("{id:'wms5',text:'为树生枝展叶',leaf:true},");
tree.append("{id:'wms6',text:'树形的配置',leaf:true},");
tree.append("{id:'wms7',text:'使用TreeStore获取数据',leaf:true},");
tree.append("{id:'wms8',text:'读取本地JSON数据',leaf:true}");
tree.append("]");
}
out.println(tree.toString());
%>
效果图: