使用树形面板创建导航面板答案

【问题标题】：Create navigation panel using treepanel使用树形面板创建导航面板
【发布时间】：2014-03-03 05:35:54
【问题描述】：

我想使用树形面板创建一个导航面板，需要帮助我如何从表中获取数据并在树形存储中增加父子根目录，如给定的图像示例

我的代码是这样的：

 {

            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,

                },

我想动态生成这个树节点。

感谢和问候，桑迪

【问题讨论】：

标签： extjs treepanel

【解决方案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;
}

【讨论】：