使用TreePanel中

Question

我想用TreePanel中創建一個導航面板，需要幫助我怎樣才能從表和馬麗娟的父母子女根數據樹商店等作爲給定的圖像例如創建導航面板

我的代碼是這樣的：

{ 

      id: 'SystemAppNavigation', 
      height: 500, 
      width: 200, 
      layout: 'anchor', 
      bodyStyle: { 
       background: '#E6E6E6 !important', 
       top: '-2px !important' 
       // border:'1px solid #000' 
      }, 
      border: false, 
      region: 'west', 
      items: [ 
       { 
        xtype: 'treepanel', 
        id: 'mytreepanel', 
        border: 0, 
        autoDestroy: false, 
        animate: false, 
        enableDrag: false, 
        enableDD:false, 
        bodyStyle: { 
         background: '#E6E6E6' 
        }, 
        cls: '', 
        anchor: '100% 100%', 
        //store: 'SystemNavigationData', 
        store: Ext.create('Ext.data.TreeStore', { 
         root: { 
          expanded: true, 
          scroll: false, 
          enableColumnHide: false, 
          lines: false, 
          children: [ 
           { 
            text: 'Operations', id: 'MnuOperations', expanded: true, children: [ 
             { text: 'Tickets', id: 'SubMnuTickets', leaf: true }, 
             { text: 'Customers', id: 'SubMnuCustomers', leaf: true }, 
             { text: 'Choices', id: 'SubMnuChoices', leaf: true } 
            ] 
           }, 
           { 
            text: 'Business', id: 'MnuBusiness', expanded: true, children: [ 
             { text: 'Credit', id: 'SubMnuCredit', leaf: true }, 
             { text: 'Gift Cards', id: 'SubMnuGiftCards', leaf: true }, 
             { text: 'Reporting', id: 'SubMnuReporting', leaf: true } 
            ] 
           }, 
           { 
            text: 'Administrative', id: 'MnuAdministrative', expanded: true, children: [ 
             { text: 'Labor', id: 'SubMnuLabor', leaf: true }, 
             { text: 'Time', id: 'SubMnuTime', leaf: true }, 
            ] 
           }, 
           { 
            text: 'User Interface Behavior', id: 'MnuUsrInterfBehav', expanded: true, children: [ 
             { text: 'User Interface', id: 'SubMnuUsrInterf', leaf: true }, 
             { text: 'International', id: 'SubMnuInternational', leaf: true } 
            ] 
           }, 
           { 
            text: 'Security', id: 'MnuSecurity', expanded: true, children: [ 
             { text: 'Security', id: 'SubMnuSecurity', leaf: true }, 
            ] 
           } 
          ] 
         } 
        }), 
        rootVisible: false, 

       }, 

我想要動態生成此樹節點。

感謝&問候， 桑迪

Answer 1

我已經通過自定義造型做到了這一點。 對於選定的行和未被選擇的行：

#SystemAppNavigation .x-grid-row-focused .x-grid-td { 
     border-bottom: 1px solid #B6B6B6 !important; 
    } 
    #SystemAppNavigation tr.x-grid-row-selected .x-grid-cell { 
     background-color: #fff !important; 
     border-right: 0px; 
    } 

父行造型：

#SystemAppNavigation tr.x-grid-tree-node-expanded .x-grid-cell { 
    background-color: #333031 !important; 
    border-right: 1px; 
} 
#SystemAppNavigation .x-grid-tree-node-expanded td { 
    background-color: #333031; 
    border-color: #333031 !important; 
    cursor: default; 
}