uniGUI之主窗口摺疊UI之UniTreeMenu(32-2)

 用uniGUI專有控件TUniTreeMenu

    2.0給TUniTreeMenu菜單添加圖標

    2.1給TUniTreeMenu菜單添加事件

2.2修改背景色

2.3調整行高

2.4改變字體和大小

---

 2] 用uniGUI專有控件TUniTreeMenu，相似標準控件的TreeView，還能夠爲每一個菜單增長圖標

---

 

2.0給TUniTreeMenu菜單添加圖標 

 

 其中左邊的圖標：Font Awesome

[info]和[search],[home],[download],[trash],[refresh],[reply],[star],[user]有用，不是全部的都會顯示出來。不推薦使用Font Awesome

推薦使用 Pictos,圖標更全更多（[locate]顯示不出來）

  2.1給TUniTreeMenu菜單添加事件

 2.1.1添加一個UniMenuItems1

2.1.2將UniTreeMenu1的SourceMenu設爲UniMenuItems1

  而後像普通的MainMenu操做UniMenuItems1，添加事件，選擇圖標

 

存在的問題

目前發現菜單太多時右側不能自動出現滾動條，即太多的子菜單將超出屏幕範圍，鼠標滾輪不能翻動菜單項，不太方便。如何解決呢？在UniTreeMenu的clientEvents屬性裏的UniEvents裏，左側頂部選擇Ext.list.Tree,而後在treeMenu.afterCreate裏面添加代碼以下，便可解決，效果還不錯。

function treeMenu.afterCreate(sender)
{
    sender.el.setStyle('overflow-y', 'auto'); }

---

2.2修改背景色

---

 2.3調整行高

 

 加入

.x-treelist-nav .x-treelist-item-text {
     line-height: 30px;
}
 .x-treelist-nav .x-treelist-item-icon:before, .x-treelist-nav .x-treelist-item-tool:before, .x-treelist-nav .x-treelist-item-expander {
     line-height: 30px;
}

---

2.4相似地，同2.3改變字體和大小,在CustomCSS里加入

.x-treelist-nav .x-treelist-item-text {
     font-family:"楷體";
     font-size: 24px;
}