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

運行效果是這樣的：