我想使用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,
},
我想动态生成这个树节点。
谢谢&问候, 沙
答案 0 :(得分: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;
}
Parent Row样式:
#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;
}