var Tree = Ext.tree;
Ext.onReady(function(){
var vport=new Ext.Viewport(
{
enableTabScroll:true,
layout:"border",
items:[
{
title:"导航菜单",
region:'west',
id:'ma',
width:200,
collapsible:true,
layoutConfig:{animate:false},
layout:'accordion',
frame:true,//设置导航条样式(圆角)和内部元素padding
bbar: [
]
},
tab
]
}
);
//使用ajax绑定目录树
Ext.Ajax.request({
url:'manageMenu.asp',
params:{'MMF':0},
success: function(resp,opts) {
var respText=Ext.util.JSON.decode(resp.responseText);
for(var i=0;i<respText.length;i++){
var id = respText[i].id;
var tree=new Ext.tree.TreePanel({
rootVisible:false,
border:false,
root:new Tree.AsyncTreeNode({id:'root_'+id,disable:true}),
loader:new Ext.tree.TreeLoader({dataUrl :'manageMenu.asp?mmf='+id+'&p='+Math.random()})
})
var tmp = new Ext.Panel({
id:"pannel_"+id,
title:respText[i].text,
iconCls:respText[i].iconCls,
//layout:'accordion',
autoWidth:true,
//html:'<div id="tree_'+id+'" style="overflow:auto;width:100%;height:100%"></div>',
items:[tree]
});
Ext.getCmp('ma').add(tmp);
Ext.getCmp('ma').doLayout();
tree.on('click',treeClick);
tree.expandAll();
}
},
failure: function(resp,opts) {
var respText = Ext.util.JSON.decode(resp.responseText);
Ext.Msg.alert('错误', respText.error);
}
})
});
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
iconCls:"plugins-nav-icon",
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+node.attributes.href+'" mce_src="'+node.attributes.href+'"></iframe>'
});
}
tab.setActiveTab(n);
}
}
var tab = new Ext.TabPanel({
xtype:'tabpanel',
deferredRender:false,
region:'center',
activeTab:0,
enableTabScroll:true,
items:[
{iconCls:"toc-icon",title:'后台首页',closable:true,autoScroll:true,html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="main.asp" mce_src="main.asp"></iframe>'},
{iconCls:"plugins-nav-icon",title:'普通面板',closable:true,autoScroll:true}
]
});
EXT 一个panel与tree结合读数据库json格式的例子
最新推荐文章于 2024-07-12 16:42:46 发布