ExtJS Tree組件是一個非常強大的用于展示層級數據的工具,通過它可以輕松地展示類似于文件夾、產品目錄、公司組織機構等類別的數據。
ExtJS Tree組件接受的數據格式有多種,其中最常用的格式是JSON。以下是一個使用JSON作為數據源的示例:
{ "text": "根節點", "expanded": true, "children": [ { "text": "節點1", "leaf": true }, { "text": "節點2", "children": [ { "text": "節點2-1", "leaf": true }, { "text": "節點2-2", "leaf": true } ] } ] }
這個JSON格式的數據表示一個樹形結構,它由一個根節點和兩個子節點組成。其中根節點有一個名為"children"的屬性,它的值是一個數組,數組中的每個元素都是一個節點。每個節點有一個名為"text"的屬性,表示節點的文本內容;還可能有一個名為"leaf"的屬性,表示該節點是否為葉子節點,如果為true,則說明該節點下不再有子節點。
需要注意的是,當JSON數據源作為Tree組件的數據源時,它需要通過Ext.data.TreeStore來加載和管理。可以使用Ajax請求從服務器獲取JSON數據,然后通過setData方法把數據設置給TreeStore,這樣就完成了數據源的加載。另外,Tree組件還提供了很多有用的事件和方法,可以方便地實現一些針對節點的操作和交互效果。