ใน extjs ไม่ว่าจะเป็นโหนดใบหรือโหนดที่ไม่ใช่ใบ, treenode ถูกใช้เพื่อแสดงโหนดของต้นไม้ ใน extjs มีสองประเภทของโหนดต้นไม้ โหนดหนึ่งเป็นโหนดต้นไม้ธรรมดาธรรมดาที่กำหนดโดย ext.tree.treenode และอีกโหนดหนึ่งเป็นโหนดต้นไม้ที่ต้องโหลดข้อมูลโหนดเด็กแบบอะซิงโครนัส คลาสนี้ถูกกำหนดโดย ext.tree.asyncTreenode
ในข้อมูลข้อความจะแสดงข้อความโหนดใบไม้โหนดเด็กเด็กขยายตัว
var store = ext.create ('ext.data.treestore', {root: {expanded: true, เด็ก: [{text: "การศึกษาในต่างประเทศ", leaf: true}, {text: "การบ้าน", ขยาย: true, เด็ก: [text: "ภาษาอังกฤษ" -Treepanel อ่านข้อมูล JSON จาก servlet
ข้อมูลในต้นไม้ Ext JS มักจะได้รับจากโปรแกรมแบบไดนามิกทางฝั่งเซิร์ฟเวอร์
เพื่อที่จะได้รับข้อมูลเราสามารถเขียนการเข้าถึงแบบต้นไม้ไปยังเบื้องหน้าทั่วไปของ servlet ที่ส่งคืน JSON:
รหัสเซิร์ฟเวอร์ฝั่งเซิร์ฟเวอร์:
นำเข้า java.io.ioException; นำเข้า java.io.printwriter; นำเข้า javax.servlet.http.httpservletrequest; นำเข้า Javax.servlet.http.httpservletresponse; นำเข้า Javax.servlet.servlete Treenodeservlet ขยาย httpservlet {บริการโมฆะป้องกัน (คำขอ httpservletrequest, httpservletResponse การตอบสนอง) โยน servletexception, ioexception {response.setContentType ("text/html; charset = utf-8"); ดูโปรแกรม JS ด้านล่างสตริง treenode = request.getParameter ("Node"); string json = ""; printwriter out = response.getWriter (); ถ้า ("0" .equals (treenode)) {json+= "[id: 1, ข้อความ: '0-1'}, {id: 2, text: ' {json+= "[{id: 11, ข้อความ: '0-1-1', leaf: true}, {id: 12, ข้อความ: '0-1-2', leaf: true}]";} อื่นถ้า ("2" .equals (treenode)) {json+= "[id: 21, ข้อความ: if ("21" .equals (treenode)) {json+= "[{id: 211, ข้อความ: '0-2-1-1', leaf: true}, {id: 212, ข้อความ: '0-2-1-2', leaf: true}]";ตอนนี้คุณสามารถเข้าถึง servlet ที่สร้างขึ้นด้านบนในวิธีการโหลดที่เกิดจาก Treepanel ในเบื้องหน้า รหัสมีดังนี้:
รหัสแสดงไคลเอนต์
ext.onready (function () {tree var = new ext.tree.treepanel ({// div-tree นี่คือค่า id ของวัตถุที่สร้างขึ้นใน html: 'div-tree', // ใช้วิธีการโหลดเพื่อเข้าถึง treenodeserletloader ext.tree.asyncTreenode ({id: '0', ข้อความ: '0'}) tree.setrootnode (root); tree.render (); root.expand ();});การเรนเดอร์มีดังนี้:
ลากและวางโหนดระหว่าง treepanels
บางครั้งในโปรแกรมเราต้องลากและวางองค์ประกอบของ treepanel ลงใน Treepanel อื่น หากเราลากในแผนผังเดียวกันเราจะตั้งค่าพารามิเตอร์ enabledD ของส่วนประกอบเป็น TRUE และตอนนี้เราต้องลากองค์ประกอบระหว่างหนังสือต่าง ๆ ในเวลานี้เราสามารถตั้งค่าพารามิเตอร์ enabledRag และ enabledRop ของส่วนประกอบ ตัวอย่างโดยละเอียดมีดังนี้:
1. เขียนรหัส JS:
รหัส JS
ext.onready (function () {var tree1 = new ext.tree.treepanel ({el: 'tree1', // ตั้งค่า enabledrag เป็นจริงที่นี่เพื่อระบุว่าองค์ประกอบสามารถลากจากที่นี่ไปที่อื่น ๆ ext.tree.treepanel ({el: 'tree2', // ตั้งค่า enabledrop เป็นจริงที่นี่เพื่อระบุว่าองค์ประกอบที่ลากในต้นไม้นี้สามารถวาง enabledrop: จริง, loader: ext.tree.treeloader ({dataurl: 'treedata2.txt'}); var root2 = new ext.tree.asyncTreenode ({text: 'book'});2. รหัส HTML มีดังนี้:
รหัส HTML
<div id = "tree1"> </div> <div id = "tree2"> </div>
3. เขียนไฟล์ TXT สองไฟล์ที่ต้องโหลดใน Treeloader และข้อมูลภายในอยู่ในรูปแบบ JSON:
treedata1.txt:
[{text: 'non-leaf node'}, {text: 'leaf node', leaf: true}] treedata2.txt: [{text: 'คอมพิวเตอร์', เด็ก ๆ : [{text: 'java', เด็ก ๆ : [{text: 'java', เด็ก ๆ : {text: 'บทนำสู่อัลกอริทึม', leaf: true}]}, {text: 'music', เด็ก: [{text: 'พื้นฐานของทฤษฎีดนตรี', leaf: true}, {text: 'carcassie classical guitar tutorial', leaf: true}]}]4. เอฟเฟกต์ของโปรแกรมจะแสดงในรูปด้านล่าง: