(转)ExtJS6 TreePanel树节点合上展开显示不同图标

seasideX

于 2019-06-06 14:51:47 发布

阅读量588

点赞数

分类专栏： ExtJS6

ExtJS6 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用ExtJS中的TreePanel组件通过beforeitemexpand和beforeitemcollapse事件动态改变节点图标，提升用户体验。同时提供了自定义CSS样式和监听树的其他事件，如itemclick、itemdblclick和itemcontextmenu的示例。

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

TreePanel的节点如包含子节点，可在展开/合上时显示不同的图标，增强客户端效果，提高用户体验。非常简单，使用TreePanel的两个事件：beforeitemexpand和beforeitemcollapse。

Ext.define('MyTreePanel_cls', {
  extend: 'Ext.tree.Panel',
  height: 400,
  width: 300,
  store: mTreeStore,
  tbar: Ext.create('TreeToolbarCls'),
  listeners:
  {
    beforeitemexpand: function (node, index, item, eOpts)
    {
      node.data.iconCls = 'folder_open';
    },
    beforeitemcollapse: function (node, index, item, eOpts)
    {
      node.data.iconCls = 'folder_close';
    }
  }
});

在页面上要定义好folder_open和folder_close两个CSS样式。

.folder_close
{
  background: url("/Image/tree/folder_close.ico") no-repeat center !important;
}

.folder_open
{
  background: url("/Image/tree/folder_open.ico") no-repeat center !important;
}

其他一些事件

        //树单击事件

            'itemclick' : function(view, rcd, item, idx, event, eOpts) {

                var dirid = rcd.get('id'); //节点id

                var dirtype = rcd.raw.dirtype; //自定义数据

        },

        //树双击击事件

            'itemdblclick' : function(view, rcd, item, idx, event, eOpts) {

                var dirid = rcd.get('id'); //节点id

                var dirtype = rcd.raw.dirtype; //自定义数据

        },

            //树右键事件

            'itemcontextmenu' : function(view, rcd, item, idx, event, eOpts) {

                event.preventDefault();

                this.showTreeItemMenu(rcd, event); //自定义处理函数

            },