ExtJs4之TreePanel

树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。

在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。

简单的Tree

ExtJs4之TreePanel

代码：

<head>
    <title></title>
     <link href="/ExtUI/ExtJs4.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" />
    <script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script>
    <script src="/ExtUI/ExtJs4.2.1/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">

        Ext.onReady(function () {
            //型录树Store
            var treeStore = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: '/Tools/106.ashx?method=getCatalogItem&cataId=' + 886
                },
                fields: ['text', 'id', 'leaf', 'cataId']
            });
            //型录树
            var CatalogTtree = Ext.create('Ext.tree.Panel', {
                store: treeStore,
                border: false,  //边框
                renderTo: Ext.getBody(),
                enableDD: true,
                rootVisible: false,  //隐藏根节点
                useArrows:true, //树节点使用箭头
                containerScroll: true,
                collapsible: false,
                autoScroll: false,                
                //singleExpand:true   //展示单个子节点，其它的子节点合并。
            });         
           CatalogTtree.expandAll(); //展开所有节点
           //CatalogTtree.collapseAll(); //关闭所有节点
           
            
               
         });

    </script>
</head>

View Code