ExtJS Tree是一款能夠顯示樹形結構的組件,可以用于構建目錄結構、菜單樹、組織結構、文件夾結構等場景。
在ExtJS中,我們可以使用Ajax請求從后端API獲取數據,并通過JSON格式傳遞數據。下面是一個簡單的JSON格式,可以用于構建一棵樹:
{ "text": "根節點", "children": [ { "text": "節點1", "leaf": true }, { "text": "節點2", "children": [ { "text": "節點2.1", "leaf": true }, { "text": "節點2.2", "leaf": true } ] } ] }
在這個JSON中,我們定義了一棵樹,根節點text為“根節點”,它有兩個子節點:節點1、節點2。其中節點1是葉子節點(leaf:true),節點2有兩個子節點:節點2.1、節點2.2。
在ExtJS中,我們可以通過Ext.tree.Panel組件展示這棵樹,并通過Ext.data.TreeStore組件綁定數據源,代碼如下:
var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'tree.json' }, root: { text: '根節點', expanded: true } }); var tree = Ext.create('Ext.tree.Panel', { store: store, renderTo: Ext.getBody(), width: 400, height: 300, title: '樹形組件', rootVisible: false });
在這里,我們先定義了一個Ext.data.TreeStore組件,綁定了一個Ajax請求的數據源,然后通過Ext.tree.Panel組件展示這棵樹,并將數據源與Ext.data.TreeStore組件綁定。最后的效果如圖所示:
總而言之,ExtJS Tree組件簡單易用,功能豐富,可用于創建各種樹形結構的網頁組件。
上一篇jsx循環vue
下一篇html menu代碼