ExtJs4之TreePanel

hsany330

于 2021-11-09 17:56:04 发布

阅读量266

点赞数

文章标签： ui javascript 开发语言

原文链接：https://www.cnblogs.com/knowledgesea/p/3552503.html

版权

Tree介绍

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

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

1.ExtJs4之Grid详细

2.ExtJs4之TreePanel

简单的Tree

代码：

复制代码

<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>

复制代码

treePanel展开所有，关闭所有

 CatalogTtree.expandAll(); //展开所有节点
 CatalogTtree.collapseAll(); //关闭所有节点

TreeGrid简例,带弹出window的form表单

代码：

View Code

treepanel右键菜单编辑

代码：

View Code

1.ExtJs4之Grid详细

2.ExtJs4之TreePanel

hsany330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs4之TreePanel

Tree介绍树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。1.ExtJs4之Grid详细2.ExtJs4之TreePanel简单的Tree代码：<head> <title></title> <link href="/ExtUI/ExtJs4..
复制链接

扫一扫