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();
	}

原文链接：https://blog.csdn.net/bdmh/article/details/21954951