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

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'); //节点idvar dirtype = rcd.raw.dirtype; //自定义数据},//树双击击事件'itemdblclick' : function(view, rcd, item, idx, event, eOpts) {var dirid = rcd.get('id'); //节点idvar dirtype = rcd.raw.dirtype; //自定义数据},//树右键事件'itemcontextmenu' : function(view, rcd, item, idx, event, eOpts) {event.preventDefault();this.showTreeItemMenu(rcd, event); //自定义处理函数},