ExtJS 的TreePanel

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">TreePanel为树状的数据结构提供了树状结构UI表示层，是从panel继承过来的，有着panel的所有属性</span>

首先加载ExtJS框架

<!--ExtJs框架开始-->
    <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/Ext/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
    <style type="text/css">
        .nodeicon
        {
            background-image: url(image/user.gif) !important;
        }
    </style>
<!--ExtJs框架结束-->

TreePanel的本地数据源

var node = {
                text: '根',
                expanded: true,
                leaf: false,
                children: [
                    { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
                    { text: '根下节点二', leaf: true },
                    { text: '根下节点三', leaf: false, children: [
                        { text: '节点三子节点一', leaf: true },
                        { text: '节点三子节点二', leaf: false, expanded: true, children: [
                            { text: '节点三子节点二节点一', leaf: true },
                            { text: '节点三子节点二节点二', leaf: true }
                        ]
                        }
                    ]
                    }
                ]
       };

//注意是本地数据源，必须按照固定的格式进行拼接

var local = new Ext.tree.TreePanel({
                title: 'TreePanelLocal',
                //rootVisible: false,
                root: node
            });

下面加载服务器端的数据源（基于jsp），treePanel的服务器数据源格式必须是符合标准的JSON字符串

在EXTJS3 中，由TreeLoader树加载器进行加载，不支持直接从Struts的值栈中取值。必须是一个纯的不包含其他内容的JSON字符串，可以是Servlet地址，jsp页面地址或者是Struts的Action地址

 var Service = new Ext.tree.TreePanel({
                title: 'TreePanelService',
                root: { text: '根', expanded: true },
                //rootVisible: false,
                loader: new Ext.tree.TreeLoader({

<span style="white-space:pre">		</span>    //url'servlet/testJSON'
                    url: 'findAll.action'
                })
            });

注意：1、这里的action经过了Struts的重定向到一个jsp页面，仍然是纯净的json字符串

      2、必须定义一个根节点，否则ExtJS找不到用于加载的根节点

这里的JSON字符串的格式为：

<pre name="code" class="plain"><span style="white-space:pre">		</span>[
                    { text: '一级权限一', leaf: true, checked:false },
                    { text: '一级权限二', leaf: true , checked:false },
                    { text: '一级权限三', leaf: false, children: [
                        { text: '二级权限一', leaf: true, checked:false },
                        { text: '二级权限一', leaf: true, checked:false },
                        { text: '二级权限一', leaf: true, checked:false }
                    	]
                    },
                    { text: '一级权限四', leaf: false
                    }
                ]

</pre><pre name="code" class="javascript">

在EXTJS4中，定义服务器数据源比较容易，增加了一个TreeStore的数据源格式，而且ExtJS4中的TreePanel支持store属性

<span style="white-space:pre">	</span>var treeStore = new Ext.data.TreeStore({

<span style="white-space:pre">		</span>proxy : new Ext.data.HttpProxy({
<span style="white-space:pre">			</span>url : 'servlet/testJSON'
<span style="white-space:pre">		</span>}),
<span style="white-space:pre">		</span>root : 'treeNodeJSON'
	
<span style="white-space:pre">	</span>});

            var treeService = new Ext.tree.TreePanel({
                title: '未授权',
                id: 'secondNode',
                width: 300,
                height: 500,
                region:'east',
                //rootVisible: false,
                store: treeStore,
                animate: true,
                root: { text: '所有权限', expanded: true }
            });

其中的JSON字符串格式为：

<span style="white-space:pre">	</span>{

	"treeNodeJSON":[

{ text: '一级权限一', leaf: true, checked:false }, { text: '一级权限二', leaf: true , checked:false }, { text: '一级权限三', leaf: false, children: [ { text: '二级权限一', leaf: true, checked:false }, { text: '二级权限一', leaf: true, checked:false }, { text: '二级权限一', leaf: true, checked:false } ] }, { text: '一级权限四', leaf: false, children: [ ] } ]

}以上格式是直接进入action里看到的字符串形式，其中的treeNodeJSON就是treeStore中的root的取值。

下面就是从treepanel中取得选中的数值

getChecked( String attribute, TreeNode startNode ) : Array 
返回选中的节点，或已选中的节点的特定的属性（例如：“id”） 

参数项： 
    attribute : String 
        （可选的）默认为null（返回实际节点） 
    startNode : TreeNode 
<span style="white-space:pre">	</span>（可选的）开始的节点对象 to start from，默认为根节点 
返回值： 
<span style="white-space:pre">	</span>Array 

然后就结束了，拿到了ID，想怎么玩就怎么玩了