Dalam extjs, apakah itu simpul daun atau simpul non-daun, treenode digunakan untuk mewakili simpul pohon. Di EXTJS, ada dua jenis node pohon. Satu node adalah simpul pohon sederhana biasa, yang ditentukan oleh ext.tree.treenode, dan yang lainnya adalah simpul pohon yang perlu memuat informasi node anak secara tidak sinkron. Kelas ini ditentukan oleh ext.tree.asynctreenode.
Dalam data, teks menampilkan teks, simpul daun, node anak anak -anak, diperluas
var store = Ext.create('Ext.data.TreeStore', {root: {expanded: true,children: [{ text: "Study abroad", leaf: true },{ text: "Homework", expanded: true, children: [{ text: "English", leaf: true },{ text: "Algebra", leaf: true}] },{ text: "TOEFL", leaf: true }]}});Treepanel membaca data JSON dari Servlet
Data dalam pohon Ext JS sering diperoleh dari program dinamis di sisi server.
Untuk mendapatkan data, pertama-tama kita dapat menulis akses seperti pohon ke latar depan umum Servlet yang mengembalikan JSON:
Kode Servlet Sisi Server:
impor java TreeenodeserVlet memperluas httpservlet {layanan void yang dilindungi (httpservletRequest, httpservletResponse response) melempar servletException, ioException {response.setContentType ("Text/html; charset = utf-8"); // Node di sini adalah di sini adalah node di sini. Lihat program JS di bawah string treenode = request.getParameter ("node"); string json = ""; printwriter out = response.getWriter (); if ("0" .Equals (TreeNode)) {json+= "[{id: 1, teks: '0-1'}, {id: 2, Text: '0' {Id: 1, Text: '0-1'}, {id: 2, Text: '0' 0 '} (Teks:' 0-1". " {json+= "[{id: 11, teks: '0-1-1', Leaf: true}, {id: 12, teks: '0-1-2', leaf: true}]";} lain if ("2" .Equals (treenode)) {json+= "[{id: 21, teks: '0-2-1," {{{{{{{{{{21, 21, {{{{{{{{21, {{{Id: 21, {{{Id: 21, {{ID: 21, {{ID: 21, {{ID: 21, {{{ID: 21, {{ID: 21, {{{ID: 21, {{{ID: 21, {{{{{{{{{{{{{{{2 " if ("21" .Equals (TreeNode)) {json+= "[{id: 211, teks: '0-2-1-1', Leaf: true}, {id: 212, teks: '0-2-1-2', Leaf: true}]";} out.write (json);}}Sekarang Anda dapat mengakses servlet yang dibuat di atas dalam metode loader yang dibentuk oleh treepanel di latar depan. Kodenya adalah sebagai berikut:
Kode Tampilan Klien
Ext.onready (function () {var tree = new ext.tree.treepanel ({// div-tree di sini adalah nilai id dari objek yang dibuat dalam html: 'div-tree', // Gunakan metode loader untuk mengakses treenodeserVLoader: new ext.tree.treeloader ({dataurl: '../ Ext.tree.asynctreenode ({id: '0', teks: '0'}) tree.setrootnode (root); tree.render (); root.expand ();});Rendering adalah sebagai berikut:
Seret dan jatuhkan simpul di antara treepanels
Terkadang dalam program ini, kita perlu menyeret dan menjatuhkan elemen treepanel ke treepanel lain. Jika kita menyeret pohon yang sama, kita mengatur parameter yang diaktifkan dari komponen ke True, dan sekarang kita perlu menyeret elemen antara buku yang berbeda. Pada saat ini, kami dapat mengatur parameter enabledrag dan enabledRop dari komponen. Contoh terperinci adalah sebagai berikut:
1. Tulis kode JS:
Kode JS
Ext.onready (function () {var tree1 = new ext.tree.treepanel ({el: 'tree1', // atur enabledrag ke true di sini untuk menunjukkan bahwa elemen dapat diseret dari sini ke tempat lain enableDrag = true, loader: new ext.tree.treeloader ({dataurl: 'treeder, new ext.tree.treeloader ({dataurl:' treeder, new ext.tree.treeloader ({dataurl: 'treeder, new ext.tree. Ext.tree.treepanel ({el: 'tree2', // atur enableDrop ke di sini untuk menunjukkan bahwa elemen yang diseret di pohon ini dapat ditempatkan enabledRop: true, loader: ext.tree.treeloader ({{{{{{{{{new loeREGE. Node '});2. Kode HTML adalah sebagai berikut:
Kode HTML
<Div ID = "Tree1"> </div> <div id = "Tree2"> </div>
3. Tulis dua file txt yang perlu dimuat di treeloader, dan data di dalamnya dalam format JSON:
treedata1.txt:
[{text: 'non-daun simpul'}, {text: 'node daun', daun: true}] treedata2.txt: [{{text: 'computer', anak-anak: [{text: 'java', anak-anak: [{text: 'java', anak-anak: [{text: 'java', true: {{text, 'java', anak-anak: [{text: 'java', true: {{Text, Java ', anak-anak: [{Text:' Java ', true}, {{{{{{{{{{{{{{{{Java', {{{{{{{{{{{Java ', Text: {text: 'Pengantar algoritma', Leaf: true}]}, {text: 'Music', anak -anak: [{text: 'Dasar -dasar teori musik', Leaf: true}, {text: 'tutorial gitar klasik karcassie', Leaf: true}]}]4. Efek program ditunjukkan pada gambar di bawah ini: