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); } } } ] },
第二种写法:
{ 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); } } }