Extjs树形控件入门

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
        });

　　该实例中是三层结构,在实际开发中我们可以根据节点的级别去设置节点应该处于的位置.