EXTJS4.2 后台管理菜单栏

时间:2023-12-22 09:53:56

EXTJS 代码:

第一种方法:

{
title: '汽车信息管理',
layout: 'fit',
items: [
{
xtype: 'treepanel',
border: 0,
rootVisible: false,
root: {
expanded: true,
children: [
{
text: '汽车信息管理1',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_PKU_Car/PM_CT_CarType.html'
}, {
text: '汽车信息管理2',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_PKU_Car/PM_CT_CarType.html1'
},
]
},
listeners: {
//添加节点点击事件
itemclick: function (v, r, item) {
var n = tab.getComponent(r.raw.id);
if (r.raw.id == 'root') {
return;
}
if (!n) { // 判断是否已经打开该面板
n = tab.add({
'id': r.raw.id,
'title': r.raw.text,
closable: true, // 通过html载入目标页
html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + r.raw.id + '"></iframe>'
});
}
tab.setActiveTab(n);
}
}
}
]
},

EXTJS4.2 后台管理菜单栏

第二种写法:

{
title: '实体商品订单管理',
xtype: 'treepanel',
expanded: true,
animate: true,
enableDD: false,
border: false,
containerScroll: true,
root: {
text: '实体商品订单管理',
id: 'root',
children: [{
text: '买家查看',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_byBuyer.html'
}, {
text: '卖家查看',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_bySeller.html'
}, {
text: '商品类型(汽车配件)',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_byProductModelForCarPart.html'
}, {
text: '商品类型(汽车用品)',
leaf: true,
id: '/UI/Page/ProductManagement/ui_html_Orders/ui_html_Orders_Real_byProductModelForCarAcce.html'
}]
},
listeners: {
//添加节点点击事件
itemclick: function (v, r, item) {
var n = tab.getComponent(r.raw.id);
if (r.raw.id == 'root') {
return;
}
if (!n) { // 判断是否已经打开该面板
n = tab.add({
'id': r.raw.id,
'title': r.raw.text,
closable: true, // 通过html载入目标页
html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + r.raw.id + '"></iframe>'
});
}
tab.setActiveTab(n);
}
}
}

EXTJS4.2 后台管理菜单栏