解決ExtJS TreePanel 的 iconCls設置問題

很久沒有寫代碼瞭，最近在做一個在線幫助網站，於是又撿起瞭 ExtJS，我用 TreePanel 做為左邊欄的導航樹，我希望能夠根據節點指向的內容來定義節點的圖標，如以下的樣子：

展開節點以前

 

展開節點以後

 

如果節點包含有子節點，則該節點就有 “展開” 和 “關閉” 這兩種狀態，我希望能過通過設置自己的樣式表來控制指定節點的這兩種狀態下的圖標，就如上圖那樣。

查看瞭 ExtJS 的幫助文檔，文檔提到 Ext.Tree.Panel 有一個 iconCls 設置項，但寥寥數語，沒有詳細的介紹如何使用，更沒有提供范例代碼：

於是我在節點數據中添加瞭這個屬性（我借用瞭ExtJS 提供的范例 layout-browser 來測試），並參考瞭網站上搜索到的許多方法試著去實現這個效果，節點數據如下所示：

 

但卻發現，無論我怎麼定義 CSS ，均不能實現我所需要的效果，通過以下樣式定義，隻能設置節點 “關閉” 狀態的圖標，一旦展開節點，圖標仍是默認的文件夾

 

樣式表如下：

也就是隻有 .myicon {…}，和 .myicon2 {…}， 這兩行定義有效，第二行定義展開節點樣式的設置沒有起作用，盡管網上提供瞭許多的范例，逐一試過均無效果（我用的是 ExtJS 4.1.0，不知道是不是版本的問題）。

於是開始分析 ExtJS 的代碼瞭，在  ext-all-dev.js 找到定義節點圖標樣式的代碼（打開文件，用  “expandedCls” 關鍵字搜索可以找到相應的代碼段 ），分析後我認為，ExtJS 沒有很好的處理 iconCls 這個屬性，我們需要做一點修改，紅色框部分是我添加的代碼，添加後問題解決瞭，而且從原來的代碼看，這裡應該還定義瞭葉子節點（leaf 為 true 的節點 ）和節點加載數據時的圖標狀態，這裡我僅對節點的 “展開” 和 “關閉” 這兩種狀態做瞭測試，其他的大傢可以自己嘗試一下。

附：

Json代碼：

[javascript] view plaincopy
{  
text: '.', 
children: [{ 
    text:'Basic Ext Layouts', 
    iconCls:'myicon', 
    expanded: false, 
    children:[{ 
        text:'Absolute', 
        id:'absolute', 
        iconCls: 'myicon2', 
        leaf:true 
    }] 
},{ 
    text:'Custom Layouts', 
    children:[{ 
        text:'Center', 
        id:'center', 
        leaf:true 
    }] 
},{ 
    text:'Combination Examples', 
    iconCls:'myicon2', 
    children:[{ 
        text:'Absolute Layout Form', 
        id:'abs-form', 
        leaf:true 
    },{ 
        text:'Tabs with Nested Layouts', 
        id:'tabs-nested-layouts', 
        leaf:true 
    }] 
}] 
} 

樣式表設置代碼：
[css] 
.myicon {background-image: url(images/spellcheck.png)} 
.x-grid-tree-node-expanded .myicon 
{ 
  /* the icon */ 
  background-image: url(images/printer.png); 
} 
 
.myicon2 {background-image: url(images/page_attach.png)} 
.x-grid-tree-node-expanded .myicon2 
{ 
  /* the icon */ 
  background-image: url(images/disk.png); 
} 

修改代碼段：

[javascript] 
for (; i < len; i++) { 
    row = rows[i]; 
    record = records[i]; 
    if (record.get('qtip')) { 
        row.rowAttr = 'data-qtip="' + record.get('qtip') + '"'; 
        if (record.get('qtitle')) { 
            row.rowAttr += ' ' + 'data-qtitle="' + record.get('qtitle') + '"'; 
        } 
    } 
    if (record.isExpanded()) { 
        row.rowCls = (row.rowCls || '') + ' ' + this.expandedCls; 
    } 
    if (record.isLeaf()) { 
        row.rowCls = (row.rowCls || '') + ' ' + this.leafCls; 
    } 
    if (record.isLoading()) { 
        row.rowCls = (row.rowCls || '') + ' ' + this.loadingCls; 
    } 
    if (record.get('iconCls').length > 0) { 
        row.rowCls = (row.rowCls || '') + ' ' + record.get('iconCls'); 
    } 
} 
作者：sz_gambol