ExtJS6 Treepanel tree nodes close up show different icons

Treepanel nodes, such as child nodes, can display different icons when expanded/closed, enhancing client effects and improving the user experience. Very simple, two events using Treepanel: Beforeitemexpand and Beforeitemcollapse.

Ext.define (' Mytreepanel_cls ', {  extend: ' Ext.tree.Panel ',  height:400,  width:300,  store: Mtreestore,  tbar:Ext.create (' treetoolbarcls '),  listeners:  {    function (node, index, item, eopts)    {      node.data.iconCls = ' Folder_open ';    },    function (node, index, item, eopts)    {      node.data.iconCls = ' Folder_close ';}}}  );

On the page to define the Folder_open and folder_close two CSS styles.

. Folder_close{  backgroundurl ("/image/tree/folder_close.ico") No-repeat Center! Important;}. Folder_open{  backgroundurl ("/image/tree/folder_open.ico") No-repeat Center! Important;}

The effect is this:

ExtJS6 Treepanel tree nodes close up show different icons