في ExtJs ، سواء كانت عقدة ورقة أو عقدة غير أوراق ، يتم استخدام treenode لتمثيل عقدة الشجرة. في extjs ، هناك نوعان من العقد شجرة. عقدة واحدة هي عقدة شجرة بسيطة عادية ، محددة بواسطة ext.tree.treeNode ، والآخر عبارة عن عقدة شجرة تحتاج إلى تحميل معلومات عقدة الطفل بشكل غير متزامن. يتم تعريف هذا الفئة بواسطة ext.tree.asynctreeNode.
في البيانات ، يعرض النص النص ، عقدة الورقة ، عقدة الأطفال للأطفال ، موسعة
var store = ext.create ('ext.data.treestore' ، {root: {الموسع: صواب ، الأطفال: [{text: "study or road" ، leaf: true} ، {text: }]}}) ؛يقرأ Treepanel بيانات JSON من Servlet
غالبًا ما يتم الحصول على البيانات الموجودة في شجرة Ext JS من البرامج الديناميكية على جانب الخادم.
من أجل الحصول على البيانات ، يمكننا أولاً كتابة وصول يشبه الأشجار إلى المقدمة المشتركة لـ Servlet التي تُرجع JSON:
رمز servlet من جانب الخادم:
استيراد java.io.ioException ؛ استيراد java.io.printWriter ؛ استيراد javax.servlet.http.httpservletrequest يمتد TreeNodeservlet Httpservlet {خدمة void المحمية (HttPservletRequest ، استجابة httpservletresponse) يرمي ServleTexception ، ioException {response.setContentType ("text/html ؛ charset = utf-8") ؛ راجع برنامج JS أدناه String TreeNode = request.getParameter ("Node") ؛ String json = "" ؛ printWriter out = response.getWriter () ؛ if ("0" .equals (treenode)) {json+= "[{id: 1 ، text: '0-1'} ، {json+= "[{{id: 11 ، text: '0-1-1' ، leaf: true} ، {id: 12 ، text: '0-1-2' ، leaf: true}]" ؛ if ("" 21 ".equals (treenode)) {json+=" [{id: 211 ، text: '0-2-1-1' ، leaf: true} ، {id: 212 ، text: '0-2-1-2'يمكنك الآن الوصول إلى Servlet الذي تم إنشاؤه أعلاه في طريقة المحمل التي تم تشكيلها بواسطة Treepanel في المقدمة. الرمز كما يلي:
رمز عرض العميل
Ext.onReady (function () {var tree = new ext.tree ext.tree.asynctreeNode ({id: '0' ، text: '0'}) tree.setrootnode (root) ؛ tree.render () ؛ root.expand () ؛}) ؛العروض كما يلي:
اسحب العقد وإسقاطها بين Treepanels
في بعض الأحيان في البرنامج ، نحتاج إلى سحب وإسقاط عنصر من Treepanel إلى Treepanel آخر. إذا كنا نجر في نفس الشجرة ، فقد قمنا بتعيين المعلمة Enupplixt of the Component إلى True ، والآن نحتاج إلى سحب العناصر بين الكتب المختلفة. في هذا الوقت ، يمكننا تعيين معلمات EnabledRag و EnabledRop للمكون. الأمثلة التفصيلية هي كما يلي:
1. اكتب رمز JS:
رمز JS
ext.onReady (function () {var tree1 = new ext.tree.treepanel ({el: 'tree1' ، // set EnuperRag to true هنا للإشارة إلى أن العنصر يمكن سحبه من هنا إلى ElaseMentRag: true ، loader: new ext.treeloader ({dataurl: 'treedata1.txt' ext.tree.treepanel ({el: 'tree2' ، // set actableDrop to true هنا للإشارة إلى أن العنصر الذي تم سحبه في هذه الشجرة يمكن تمكينه: true ، loader: new ext.tree العقدة}2. رمز HTML كما يلي:
رمز HTML
<div id = "tree1"> </viv> <div id = "tree2"> </viv>
3. اكتب ملفين TXT الذي يجب تحميله في Treeloader ، والبيانات الموجودة في الداخل بتنسيق JSON:
treedata1.txt:
[{text: 'non-leaf node'} ، {text: 'Leaf Node' ، Leaf: true}] treedata2.txt: [{text: 'computer' ، {{text: 'java' ، children: [{text: 'java' ، children: {text: 'مقدمة إلى الخوارزمية' ، الورقة: true}]} ، {text: 'music' ، الأطفال: [{text: 'أساسيات نظرية الموسيقى' ، الورقة: true} ، {text: 'carcassie Classical Guitar Tutorial' ، Leaf: true}]}]4. يظهر تأثير البرنامج في الشكل أدناه: