Ext3.1.1(三) ViewPort+TreePanel+TabPanel+Panel布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qwkxq/article/details/56831276

Ext.onReady(function(){
			var leftMenu = new Ext.Panel({
		    	id:'left-menu',
		    	title:'导航菜单',
		        region:'west',
		        split:true,
		        collapsible:true,
		        width: 210,
		        layout:{
		            type: 'accordion',
		            animate: true
		        }
		    });
			
			var topTile = new Ext.Panel({
				region : 'north',
				height : 50,
				border : false,
				html : '<center style="margin-top:15px; font-weight: bold;">布局实例</center>',
			});
			
			workspace = new Ext.TabPanel({
			    	region : 'center',
			    	xtype : 'tabpanel',
					activeTab : 0,
					enableTabScroll:true,
					items : [{
						title : '首页',
						html: '<iframe id="main_page" frameborder="0" style="width:100%;height:100%;" src="http://myexception.cn"/>'
					}],
					listeners : { 
						remove : function(tab, panel) { 
							Ext.destroy(panel.el); 
						} 
					}
			});
			
			new Ext.Viewport({
				layout : 'border',
				items : [topTile , leftMenu, workspace]
			});
			
			addTab("aaa", workspace);
			addTab("aaa", workspace);
			
			//加载左边菜单
			initLeftMenu(leftMenu);
		});
		
		function addTab(text,workspace){
			var _allitems = workspace.items;
			//遍历所有tab，找有没有同名的tab
			if(_allitems != null && typeof(_allitems) != "unfinded" && _allitems.length > 0){
				for (var k = 0; k < _allitems.length; k++) {
					if(_allitems.get(k).title == text){
						//存在同名的tab，则替换
						workspace.setActiveTab(k);
						var _activeTab = workspace.getActiveTab();
						_activeTab.load({
						    url: getRootPath()+'/test.jsp',
						    scripts: true
						});
						return;
					}
				}
			}
			//不存在则添加一个
			var _tab = new Ext.Panel({
            	title:text,
            	iconCls:'', // x-tree-node-leaf
            	closable : true,			                	
            	autoLoad : {
				    url: getRootPath()+'/test.jsp',
				    scripts: true
				}
            });
			workspace.add(_tab);
			workspace.setActiveTab(workspace.items.length-1);
		}

function initLeftMenu(leftMenu){
	Ext.Ajax.request({
		url: getRootPath()+"/testExtAjax",
		success : function(resp,opts){
			var respText = Ext.util.JSON.decode(resp.responseText); 
			//alert(JSON.stringify(respText));//服务器返回的数据
			//alert(JSON.stringify(opts))//请求的信息(url,headers...)
			for(var i = 0; i < respText.length; i++){
				var _menu = respText[i];		
				
				//获取子节点json
				var _viewchilren = getChildTreeData(_menu);
				
				//生成的树
				var _item = generateTreeByJson(_menu,_viewchilren);
				
				leftMenu.add(_item);
			}
			leftMenu.doLayout();  //刷新panel
		}
	});
}

//生成树
function generateTreeByJson(_menu,_viewchilren){
//	alert(JSON.stringify(_viewchilren))
	var _item = new Ext.tree.TreePanel({
        title: _menu.title,
        rootVisible: false,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
        	expanded: true,
        	children : _viewchilren
        }),listeners: {
            click: function(n) {
            	//alert(n.attributes.text)
            	addTab(n.attributes.text, workspace);
            }
        }
	});
	return _item;
}

//根据父节点json取出所有的子节点
function getChildTreeData(_menu){
	//获取模块的功能列表
	var _children = _menu.children;
	var _viewchilren = new Array();
	if(_children != null && typeof(_children)!="unfinded" && _children.length > 0){					
		for(var j = 0; j < _children.length; j++){
			var _child = _children[j];
			var _viewobj = new Object();
			_viewobj.text = _child.title;
			_viewobj.url = getRootPath() + _child.url;
			_viewobj.icon = _child.icon;
			_viewobj.leaf = true;
			_viewchilren[j] = _viewobj;
		}
	}
	return _viewchilren;
}