EXT 一个panel与tree结合读数据库json格式的例子

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}
            ]
	
});