Extjs樹形控制項入門

標籤：style   blog   class   code   c   tar   

Extjs樹形控制項由Ext.tree.TreePanel類定義,控制項的名稱為TreePanel,TreePanel繼承自Panel類,在Extjs中使用樹形控制項其實很簡單.

大家知道要使用Extjs必須引入他的庫,所以我們要引入以下幾個檔案:

ext-all.css

ext-base.js

ext-all.js

PS:筆者採用的是extjs3.0版本

那怎麼載入外掛程式呢?放心,extjs有自己載入的方法:

Ext.onReady(function(){

//coding...

}

以下是執行個體代碼:

//樹形控制項        var root = new Ext.tree.TreeNode({            id:"root",            text:"樹的根"        });        var root2=root.appendChild(new Ext.tree.TreeNode({            id:"c1",            text:"第一層"        }));        root2.appendChild(new Ext.tree.TreeNode({            id:"c3",            text:"第2層"        }));        root.appendChild(new Ext.tree.TreeNode({            id:"c2",            text:"第一層2"        }));        var tree=new Ext.tree.TreePanel({            renderTo:Ext.getBody(),            root:root,            width:100        });

View Code

　　該執行個體中是三層結構,在實際開發中我們可以根據節點的層級去設定節點應該處於的位置.