ExtJs 4.x 学习小记：动态添加节点到Ext.tree.Panel
实现：页面中有一个表单，输入分类名称，保存成功后，左侧目录树上添加一个新的节点。
jsp代码 ，"././js/cataloginfo.js"为Ext创建表单的脚本
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%request.setCharacterEncoding("utf-8"); %>
<%
String optype=request.getParameter("optype");
session.setAttribute("optype", optype);
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="././js/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="././js/extjs/bootstrap.js"></script>
<script type="text/javascript" src="././js/extjs/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript" src="././js/cataloginfo.js"></script>
<div id='info'></div>
</body>
</html>
cataloginfo.js，catalogTree是TreePanel的ID，通过ID找到它
/**
*
*/
Ext.onReady(function(){
var infoForm = Ext.create('Ext.form.Panel', {
title: '请填写相关信息',
bodyPadding: 10,
layout:'form',
fileUpload: true,
renderTo: 'info',
items: [{
xtype: 'textfield',
name: 'catalogname',
fieldLabel: '分类名称：',
allowBlank: false
}],
buttons:[{
text:'重置',
handler:function(){
infoForm.getForm().reset();
}
},{
text:'保存',
formBind:true,
handler:function()
{
infoForm.getForm().submit({
waitMsg:'正在保存数据...',
waitTitle:'提示',
url:'././SaveServlet',
params: {
selid:getSelectedNodeID()
},
method:'POST',
success:function(form,returnValue)
{
Ext.MessageBox.alert('提示','保存成功',function(){
Ext.getCmp('catalogform').close();
});
infoForm.getForm().reset();
//解析服务端返回的json串
var jsonobj = Ext.JSON.decode(returnValue.response.responseText);
var store = Ext.getCmp('catalogTree').getStore();
if (jsonobj.optype == OPERATION_NEW) //添加
{
var newnode=[{id:jsonobj.id,text:jsonobj.name,leaf:true}]; //新节点信息
var pnode = store.getNodeById(jsonobj.pid); //查找父节点
if (Ext.isEmpty(pnode)) //如果没有父节点，则pnode为根节点
{
pnode = store.getRootNode();
}
pnode.appendChild(newnode); //添加子节点
pnode.set('leaf',false);
pnode.expand();
//选中刚添加的节点
Ext.getCmp('catalogTree').getSelectionModel().select(store.getNodeById(jsonobj.id));
}
else if (jsonobj.optype == OPERATION_EDIT)
{
store.getNodeById(jsonobj.id).set('text',jsonobj.name);
}
},
failure:function(form,returnValue)
{
alert(returnValue.response.responseText);
alert("添加失败！");
}
});
}
}]
});
})
处理doPost的SaveServlet，返回json串给表单的success方法
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// request.setCharacterEncoding("utf-8");
HttpSession session=request.getSession();
String name = request.getParameter("catalogname");
int pid = Integer.parseInt(request.getParameter("selid"));
DBOperator db = new com.mh.DB.DBOperator();
int optype = Integer.parseInt((String)session.getAttribute("optype"));
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String json = "";
if (optype == Constans.OPERATION_NEW)
{
int id = db.insertCatalog(pid, name);
json = String.format("{success:true,id:%d,name:'%s',pid:%d,optype:%d}",
id,name,pid,optype);
}
out.println(json);
out.close();
}