Ext.tree.Panel6.2

最新推荐文章于 2025-07-03 14:42:13 发布
置顶 最新推荐文章于 2025-07-03 14:42:13 发布
阅读量584 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： ext tree ext.tree.panel Ext 树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Newonexs/article/details/89214866
本文深入解析Ext.tree.Panel组件在ExtJS 6.2版本中的应用，重点介绍数据结构配置及其实现过程，适合初学者快速上手。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于ext6.2的Ext.tree.Panel

Ext.tree.Panel一些重要的配置

最近一段时间一直在学习ext6.2版本, 是一个不折不扣的ext新手（之前的版本都没有接触过），官网和百度都没有找到相应的中文文档，所以学些起来比较吃力，特别是在学习Ext.tree.Panel树结构这一块的时候，但最终还是弄出来，在这里给大家分享一下我的心得，希望对大家有帮助！！！！

数据结构1


{
"code": 0,
"message": "成功",
"result": [
 {
   "id": "root-1-menu-permission-user",
   "parentId": "root-1-menu-permission",
   "name": "管理员",
   "iconUrl": "",
   "sortNo": 0,
 },
 {
   "id": "root-1-menu-system-loginlog",
   "parentId": "root-1-menu-system",
   "name": "登录日志",
   "iconUrl": "",
   "sortNo": 0,
 },
 {
   "id": "root-1-menu-account-agent",
   "parentId": "root-1-menu-account",
   "name": "代理商",
   "iconUrl": "",
   "sortNo": 0,
 },
 {
   "id": "root-1-menu-pay-recharge",
   "parentId": "root-1-menu-pay",
   "name": "交易记录",
   "parent": null,
   "iconUrl": "",
   "sortNo": 0,
 },
 {
   "id": "root-1-menu",
   "parentId": "root",
   "name": "菜单管理",
   "iconUrl": "",
   "sortNo": 0,
 },
 {
   "id": "root-1-menu-permission-role",
   "parentId": "root-1-menu-permission",
   "name": "角色管理",
   "iconUrl": "",
   "sortNo": 1,
 },
 {
   "id": "root-1-menu-system-operationlog",
   "parentId": "root-1-menu-system",
   "name": "操作日志",
   "iconUrl": "",
   "sortNo": 1,
 },
 {
   "id": "root-1-menu-account-merchant",
   "parentId": "root-1-menu-account",
   "name": "商户",
   "iconUrl": "",
   "sortNo": 1,
 },
 {
   "id": "root-1-menu-pay-draw",
   "parentId": "root-1-menu-pay",
   "name": "代付明细",
   "iconUrl": "",
   "sortNo": 1,
 },
 {
   "id": "root-1-menu-pay",
   "parentId": "root-1-menu",
   "name": "支付管理",
   "iconUrl": "layui-icon layui-icon-rmb",
   "sortNo": 1,
 },
 {
   "id": "root-1-menu-permission-module",
   "parentId": "root-1-menu-permission",
   "name": "模块管理",
   "url": "/admin/permission/module",
   "iconUrl": "",
   "sortNo": 2,
 },
 {
   "id": "root-1-menu-system-systemset",
   "parentId": "root-1-menu-system",
   "name": "系统设置",
   "iconUrl": "",
   "sortNo": 2,
 },
 {
   "id": "root-1-menu-account-bankcard",
   "parentId": "root-1-menu-account",
   "name": "银行卡",
   "iconUrl": "",
   "sortNo": 2,
 },
 {
   "id": "root-1-menu-pay-channel",
   "parentId": "root-1-menu-pay",
   "name": "代付通道",
   "url": "/admin/payment/payChannel",
   "iconUrl": "",
   "sortNo": 2,
 },
 {
   "id": "root-1-menu-pay-balance",
   "parentId": "root-1-menu-pay",
   "name": "资金明细",
   "iconUrl": "",
   "sortNo": 2,
 },
 {
   "id": "root-1-menu-account",
   "parentId": "root-1-menu",
   "name": "账户管理",
   "iconUrl": "layui-icon layui-icon-user",
   "sortNo": 2,
 },
 {
   "id": "root-1-menu-report-dayreport",
   "parentId": "root-1-menu-pay",
   "name": "日报表",
   "iconUrl": "",
   "sortNo": 3,
 },
 {
   "id": "root-1-menu-pay-client",
   "parentId": "root-1-menu-account",
   "name": "终端账号",
   "iconUrl": "",
   "sortNo": 3,
 },
 {
   "id": "root-1-menu-account-blackbankcard",
   "parentId": "root-1-menu-account",
   "name": "黑银行卡",
   "iconUrl": "",
   "sortNo": 3,
 },
 {
   "id": "root-1-menu-permission-function",
   "parentId": "root-1-menu-permission",
   "name": "功能管理",
   "iconUrl": "",
   "sortNo": 3,
 },
 {
   "id": "root-1-menu-system-rechargeset",
   "parentId": "root-1-menu-system",
   "name": "支付参数",
   "iconUrl": "",
   "sortNo": 3,
 },
 {
   "id": "root-1-menu-system",
   "parentId": "root-1-menu",
   "name": "系统管理",
   "url": "",
   "sortNo": 3,
 },
 {
   "id": "root-1-menu-report-monthreport",
   "parentId": "root-1-menu-pay",
   "name": "月报表",
   "iconUrl": "",
   "sortNo": 4,
 },
 {
   "id": "root-1-menu-system-passwordset",
   "parentId": "root-1-menu-system",
   "iconUrl": "",
   "sortNo": 4,
 },
 {
   "id": "root-1-menu-permission-menu",
   "parentId": "root-1-menu-permission",
   "name": "菜单管理",
   "iconUrl": "",
   "sortNo": 4,
 },
 {
   "id": "root-1-menu-permission",
   "parentId": "root-1-menu",
   "name": "权限管理",
   "iconUrl": "layui-icon layui-icon-auz",
   "sortNo": 4,
 },
 {
   "id": "root-1-menu-report-poolreport",
   "parentId": "root-1-menu-pay",
   "name": "总报表",
   "iconUrl": "",
   "sortNo": 5,
 },
 {
   "id": "root-1-menu-system-test",
   "parentId": "root-1-menu-system",
   "name": "支付测试",
   "iconUrl": "",
   "sortNo": 5,
  
 }
]
}

代码块1

var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: ‘xxxx/xxx/’,//请求路径
                reader: {
                    type: 'json',
                    rootProperty:function (data) {
                        if(data.result){
                            return data.result;
                        }else{
                            return data.children;
                        }
                    }
                },

            },
            /!*root: {//定义根节点，与rootVisible属性配合使用 true为显示根节点需要配置；反之不显示就不用配置
                name : '根节点',
                expanded: false
            },*!/
            autoLoad:true,//自动加载数据
            parentIdProperty:'parentId',
        });
        var treePanel = Ext.create({
            xtype: 'treepanel',
            renderTo: "app",
            bodyStyle:'border:1px solid #e9e9e9; overflow-x:hidden; overflow-y:hidden',

            columnLines:true,
            enableColumnResize:true,
            height: '100%',
            width: '100%',
            rootVisible: false,//是否显示根节点
            singleExpand: false,//是否每次之展开一个节点
            store:store,
            columns: [
                {  dataIndex: 'id',         flex: 1,  align:'left', text: 'ID'},
                {  dataIndex: 'name',       flex: 1,  align:'left', xtype: 'treecolumn', text: '菜单名称'},
                {  dataIndex: 'parentId',   flex: 1,  align:'left', text: '上级菜单ID'},
                {  dataIndex: 'iconUrl',    flex: 1,  align:'center', text: '图标'},
                {  dataIndex: 'sortNo',     flex: 1,  align:'center', text: '排序号'},
                {  dataIndex: 'action',     flex: 1,  align:'center', text: '操作'},
            ]
        });

讲解1： 数据结构1为 平级数据 不是 树形结构的数据，像这种 平级数据必须要有 parentId,也就是所属上级的Id,然后根据属性 parentIdProperty：‘parentId’ 配置:

  1. parentIdProperty 父级ID属性名
 parentIdProperty:'parentId',
  1. rootProperty
 rootProperty:'result'

数据结构2

{
  "code": 0,
  "message": "成功",
  "result": {
    "id": "root-1-menu",
    "parentId": "root",
    "name": "菜单管理",
    "children": [
      {
        "id": "root-1-menu-pay",
        "parentId": "root-1-menu",
        "name": "支付管理",
        "children": [
          {
            "id": "root-1-menu-pay-recharge",
            "rowNumber": 4,
            "parentId": "root-1-menu-pay",
            "name": "交易记录"
          },
          {
            "id": "root-1-menu-pay-draw",
            "rowNumber": 9,
            "parentId": "root-1-menu-pay",
            "name": "代付明细"
          },
          {
            "id": "root-1-menu-pay-channel",
            "rowNumber": 14,
            "parentId": "root-1-menu-pay",
            "name": "代付通道"
          },
          {
            "id": "root-1-menu-pay-balance",
            "rowNumber": 15,
            "parentId": "root-1-menu-pay",
            "name": "资金明细"
          },
          {
            "id": "root-1-menu-report-dayreport",
            "parentId": "root-1-menu-pay",
            "name": "日报表"
          },
          {
            "id": "root-1-menu-report-monthreport",
            "parentId": "root-1-menu-pay",
            "name": "月报表"
          },
          {
            "id": "root-1-menu-report-poolreport",
            "parentId": "root-1-menu-pay",
            "name": "总报表"
          }
        ]
      },
      {
        "id": "root-1-menu-account",
        "parentId": "root-1-menu",
        "name": "账户管理",
        "children": [
          {
            "id": "root-1-menu-account-agent",
            "parentId": "root-1-menu-account",
            "name": "代理商"
          },
          {
            "id": "root-1-menu-account-merchant",
            "parentId": "root-1-menu-account",
            "name": "商户"
          },
          {
            "id": "root-1-menu-account-bankcard",
            "parentId": "root-1-menu-account",
            "name": "银行卡"
          },
          {
            "id": "root-1-menu-pay-client",
            "parentId": "root-1-menu-account",
            "name": "终端账号"
          },
          {
            "id": "root-1-menu-account-blackbankcard",
            "parentId": "root-1-menu-account",
            "name": "黑银行卡"
          }
        ]
      },
      {
        "id": "root-1-menu-system",
        "parentId": "root-1-menu",
        "name": "系统管理",
        "children": [
          {
            "id": "root-1-menu-system-loginlog",
            "parentId": "root-1-menu-system",
            "name": "登录日志"
          },
          {
            "id": "root-1-menu-system-operationlog",
            "parentId": "root-1-menu-system",
            "name": "操作日志"
          },
          {
            "id": "root-1-menu-system-systemset",
            "parentId": "root-1-menu-system",
            "name": "系统设置"
          },
          {
            "id": "root-1-menu-system-rechargeset",
            "parentId": "root-1-menu-system",
            "name": "支付参数"
          },
          {
            "id": "root-1-menu-system-passwordset",
            "parentId": "root-1-menu-system",
            "name": "密码设置"
          },
          {
            "id": "root-1-menu-system-test",
            "parentId": "root-1-menu-system",
            "name": "支付测试"
          }
        ]
      },
      {
        "id": "root-1-menu-permission",
        "parentId": "root-1-menu",
        "name": "权限管理",
        "children": [
          {
            "id": "root-1-menu-permission-user",
            "parentId": "root-1-menu-permission",
            "name": "管理员"
          },
          {
            "id": "root-1-menu-permission-role",
            "parentId": "root-1-menu-permission",
            "name": "角色管理"
          },
          {
            "id": "root-1-menu-permission-module",
            "parentId": "root-1-menu-permission",
            "name": "模块管理"
          },
          {
            "id": "root-1-menu-permission-function",
            "parentId": "root-1-menu-permission",
            "name": "功能管理"
          },
          {
            "id": "root-1-menu-permission-menu",
            "parentId": "root-1-menu-permission",
            "name": "菜单管理"
          }
        ]
      }
    ]
  }
}

代码块2

 var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: adm_menuitem_listby,//请求
                reader: {
                    type: 'json',
                    rootProperty:function (data) {
                        if(data.result){
                            return data.result;
                        }else{
                            return data.children;
                        }
                    }
                },

            },
            /!*root: {//定义根节点，此配置是必须的
                name : '根节点',
                expanded: false
            },*!/
            autoLoad:true,
            parentIdProperty:'parentId',
        });
        var treePanel = Ext.create({
            xtype: 'treepanel',
            renderTo: Ext.Body()
            height: '100%',
            width: '100%',
            rootVisible: false,//是否显示根节点
            singleExpand: false,//是否每次之展开一个节点
            store:store,
            columns: [
                {  dataIndex: 'id',         flex: 1,  align:'left', text: 'ID'},
                {  dataIndex: 'name',       flex: 1,  align:'left', xtype: 'treecolumn', text: '菜单名称'},
                {  dataIndex: 'parentId',   flex: 1,  align:'left', text: '上级菜单ID'},
                {  dataIndex: 'iconUrl',    flex: 1,  align:'center', text: '图标'},
                {  dataIndex: 'sortNo',     flex: 1,  align:'center', text: '排序号'},
                {  dataIndex: 'action',     flex: 1,  align:'center', text: '操作'},
            ]
        });

讲解2： 其他地方的代码还是没有什么变化，因为远程返回的数据已经是 树形结构的 主要还是 rootProperty 这个属性的变化

rootProperty:function (data) {
   if(data.result){
       return data.result;
    }else{
       return data.children;
    }
}

第一次data返回的是 远程数据结果 所以你要取值为 data.result ,这时候就会显示根目录，当你点击展开显示下级的时候，data返回的就是点击节点的数据（包涵下一级数据,在 children 属性中 ）所以你要显示下级 则返回取到下级数据 data.children。

效果图

在这里插入图片描述
在这里插入图片描述
注：如果还不清楚有问题的，可以给我发消息，看到了会及时回复的

破&敛
关注
Extjs6.2实现分组全选 利用标题添加checkbox
Mr_JGuo的博客
06-24 1211
自己研究许久未果，后来在领导的帮助下在google搜索下找到示例。现在extjs已经不再流行，网上面的例子都已经不再适用。 贴网址：https://fiddle.sencha.com/fiddle/19rr?height=600 效果如图： 原文的代码有几个bug，第一是不能使用grouping的startCollapsed属性。因为原来的TPL渲染的视图会在再次渲染的过程中破坏...
Ext的TreeGrid增加复选框(CheckBox)与复选框操作
Yon
07-27 2365
这篇博客是小弟之前写在cnblogs的，发现cnblogs的人气太少，所以准备博客搬家到csdn。希望大家多多关照。  搞了半天，没弄明白，csdn为什么不能像csdn一样可以代码高亮显示啊。 没搞明白这个编辑器怎么用的，需要修改代码的朋友，请到http://www.cnblogs.com/yon2068/archive/2012/07/03/2575375.html  看高亮显示的代码。
ext TREE
03-27
NULL 博文链接：https://scmky.iteye.com/blog/1174740
Ext.tree
iteye_8475的博客
04-12 208
1、Ext.tree.TreePanel       主要配置项：             root：树的根节点。             rootVisible：是否显示根节点，默认为true。             useArrows：是否在树中使用Vista样式箭头，默认为false。             lines：是否显示树线，默认为true。             loader...
ExtJS树形选择器组件教程与实战
最新发布
weixin_36197669的博客
07-03 603
TreeSelector是ExtJS框架中的一个组件，它用于展示层级结构的数据。这种层级数据非常适合展示类似文件系统、组织结构等具有明显父子关系的信息。TreeSelector的核心功能是允许用户浏览和选择这些数据结构中的节点。它为复杂的用户界面提供了直观的导航方式，并且与ExtJS的其他数据组件和模型紧密集成，提供丰富的数据处理能力。在Ext.tree.Panel中，可以对树节点的显示内容进行高度自定义，特别是通过renderer函数来实现。renderer。
Ext的tree
下雨天的程序生活专栏
09-22 986
 YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤；1.定义一个Tree对象：var tree = new Ext.tree.TreePanel(tree, {                  animate:true,                   loader: new Ext.tree
Extjs-树 Ext.tree.TreePanel
热门推荐
itlwc
08-16 5万+
1.简单的树 效果图 代码 Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif'; var tree = new Ext.tree.TreePanel({ region: 'center', //True表示为面板是可收缩的，并自动渲染一个展开/收缩的
Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能
weixin_30298497的博客
04-20 461
最近在用Extjs 做后台管理系统，真的非常好用。总结的东西分享一下。 先展示一下效果图 好了，开始吧！ 首先说一下我的创建结构： 一、构造内容 这个函数中包括store的创建，treePanel的创建 一个treePanel必须绑定一个Ext.data.TreeStore. function constructor(config){ //创建一个treeSto...
extjs带复选框的树包括全选 反选 子选父以及 父选子
11-25
ExtJS是一种流行的JavaScript框架，用于构建富客户端应用程序。在ExtJS中，树形组件（TreePanel）是一个常用的功能，用于展示层次结构的数据。当树形组件结合复选框时，可以实现用户对节点的选择操作，如全选、反选...
ExtJS6.2开发-首页左菜单区域(三)
砌墙民工的博客
12-07 391
菜单区域开发 一、创建做左菜单组件 1.在在app目录下创建main\core\index\component下创建indexLeftMenu.js 2.编写基础代码如下: Ext.define('appCenter.main.core.index.component.indexLeftMenu', { extend : 'Ext.panel.Panel', alias : 'widget...
Ext Js权威指南(.zip.001
09-26
7.5.11　树节点：ext.data.nodeinterface与ext.data.tree / 364 7.5.12　store的方法 / 366 7.5.13　store的事件 / 368 7.5.14　store管理器：ext.data.storemanager / 369 7.6　综合实例 / 369 7.6.1　远程读取json...
Ext.Tree.Panel
01-22
关于Ext Tree Panel,相关的知识文档
Ext树形结构——TreePanel
Donny的专栏
12-26 764
创建一个树 树控件由Ext.tree.TreePanel类定义，控件名称为treepanel，继承自Panel面板。 要实现一棵树也很简单： 1.创建一个TreePanel 2.为TreePanel设置一个根结点（RootNode） 3.添加子节点（TreeNode）到根几点。 示例： Ext.BLANK_IMAGE_URL = '../../resources/images/de...
【翻译】Ext JS 6.2 早期访问版本发布
weixin_33816821的博客
06-15 195
原文：Announcing Ext JS 6.2 Early Access 非常开心，Sencha Ext JS 6.2早期访问版本今天发布了。早期访问版本的主要目的是为了让大家进行测试并评估Ext JS6.2的工作进度，这对于发布更好的Ext JS版本会有相当大的帮助。 Download Ext JS 6.2 EA See Ext JS 6.2 EA Examples ...
EXT 组件一些属性与方法（Tree）
Angie Chiu
01-13 932
1、Ext.tree.TreePanel  主要配置项：  root：树的根节点。  rootVisible：是否显示根节点，默认为true。  useArrows：是否在树中使用Vista样式箭头，默认为false。  lines：是否显示树线，默认为true。  loader：树节点的加载器，默认为Ext.tree.TreeLoader。  selModel：树的选择模式，默
Ext 权限树
爱.NET
12-03 152
先上图片 我们要遍历的XML权限菜单如下(犹如内容很长，我这里只截取一部分) <MenuFunction> <menuCode>30</menuCode> <menuName>附加工作管理</menuName> <parentMenuCode>-1</parentMenuCod...
ExtJS专题-TreePanel(1)
ama7449的博客
09-09 219
这次我们来学习下ExtJS中的树面板（TreePanel），很多人都说，只是为了树，都要好好学习ExtJS！可见大家对Tree的一往情深。从另一方面来说，Tree这种结构在实际项目中也的确用得相当广泛，所以我们很有必要研究一下它。这次我们完成的树大致上有这样的功能：它的节点是动态异步从后台（存储在数据库中一张电子产品分类表）加载的，节点之间可以拖曳，节点可以编辑，同时还支持右键菜单，而且...
ext中的Tree组件
随心所欲
05-17 1583
YUI.ext中的Tree组件可以用来在页面实现树型布局的效果，包括常见的树型菜单等，那么我们怎样才能生成一个Tree呢，主要有以下四个步骤； 1.定义一个Tree对象： var tree = new Ext.tree.TreePanel('tree', {                   animate:true,                   loader: new Ext.
Ext.TreePanel
瞎掰大数据-- 世界的本质是数据，胡侃瞎掰，专注微软大数据解决方案
10-03 904
1.第一个静态树--最简单的树效果图: html代码: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->js代码:Code highlighting produced by Actipro CodeHighlig
Ext.tree.Panel关掉左边的勾选框
07-11
要关闭 Ext.tree.Panel 左边的勾选框，您可以使用以下方法之一： 1. 使用 `checkModel` 属性：将 `checkModel` 属性设置为 `'none'`，这将禁用所有节点的勾选框。 ```javascript Ext.create('Ext.tree.Panel', { // 其他配置项... checkModel: 'none', // 其他配置项... }); ``` 2. 使用 `checkable` 属性：将 `checkable` 属性设置为 `false`，这将禁用所有节点的勾选框。 ```javascript Ext.create('Ext.tree.Panel', { // 其他配置项... checkable: false, // 其他配置项... }); ``` 请注意，以上方法将禁用整个树节点的勾选框。如果您只想禁用特定的节点，请使用节点的 `checked` 属性进行控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值