Ext.onReady(panelLayout);
function panelLayout() {
//新建tabpanel
var tab = Ext.create('Ext.TabPanel', {
region : 'center',
deferredRender : false,
activeTab : 0,
resizeTabs : true, // turn on tab resizing
minTabWidth : 115,
tabWidth : 135,
enableTabScroll : true
});
var viewPort = Ext.create('Ext.Viewport', {
layout : "border",
items : [ {
region : 'north',
minHeight : 100,
html : 'north'
}, {
title : 'West Region is collapsible',
region : 'west',
xtype : 'panel',
width : 200,
collapsible : true, // 設置可摺疊
id : 'west-region-container',
layout : 'fit',
margins : '0 0 0 0',
layout : 'accordion',
title : '菜單',
split : true,
collapsible : true,
layoutConfig : {
animate : true
},
items : [{
title : '業務信息處理',
xtype : 'treepanel',
expanded : true,
animate : true,
enableDD : false,
border : false,
containerScroll : true,
root : {
text : '..',
id:'root',
children : [{
text : '業務信息',
id : 'bussinessInfo_gotoBusinessInfo.do',
leaf : true
}, {
text : '組織管理',
leaf : true,
id :'dept_list.jsp'
}]
},
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 : '信息中心',
border : false,
html : '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
}, {
title : '系統設置',
border : false,
html : '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
}]
},tab, {
region : 'south',
minHeight : 25,
html:"<div align='center'>版權所有 xxxx有限公司 © 信息服務中心</div>"
} ]
})
}
extjs4.2點擊樹形菜單生成tab頁並訪問發送請求
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.