JavaScript的ExtJS框架中数面板TreePanel的使用实例解析.pdfVIP

TreePanel 为 ExtJS 提供了一个方便的树结构数据展示 ,尤其是在处理 JSON 格式数据时 十分常用 ,接下来我们就来看两则 JavaScript 的 ExtJS 框架中数面板 TreePanel 的使用实例解 析 在 ExtJS 中，不管是叶子节点还是非叶子节点，都统一用 TreeNode 表示树的节点。在 ExtJS 中，有两种类型的树节点。 一种节点是普通的简单树 节点， 由 Ext.tree.TreeNode 定义， 另外一种是需要异步加载子节点信息的树节点，该类由 Ext.tree.AsyncTreeNode 定 义。 在数据中， text 显示文字， leaf 节点 ， children 子节点， expanded 展开 var store = Ext.create( ‘Ext.data.TreeStore, { root: { expanded: true, children: [ { text: “留学” , leaf: true }, { text: “功课” , expanded: true, children: [ { text: “英语” , leaf: true }, { text: “代数” , leaf: true} ] }, { text: “托福” , leaf: true } ] } }); TreePanel 从 servlet 中读取 JSON 数据 在 Ext JS 的 Tree 中的数据往往是从服务器端的动态程序中获取的。 为了获取数据，我们可以先编写一个返回 JSON 的 Servlet 共前台的树形组建访问： 服务器端 servlet 代码： import java.io.IOException; import java.io.PrintWriter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; public class TreeNodeServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType(text/html;charset=utf-8); //这里的 node 是前台的 AsyncTreeNode 组建中设置的 ID ，见下面的 JS 程序 String treeNode = request.getParameter(node); String json = ; PrintWriter out = response.getWriter(); if(0.equals(treeNode)) { json+=[{id:1,text:0-1},{id:2,text:0-2}];