学步园

viewport和布局差不多的，看看图就知道了：

viewport.js:

Ext.onReady(function(){
	Ext.BLANL_IMAGE_URL = "../../resources/image/default/s.gif";
//	var north = new Ext.Panel({
//		title:"北方",
//		region:"north",
//		height:80
//	});
//	
//	var south = new Ext.Panel({
//		title:"南方",
//		region:"south",
//		height:80
//	});
//	
//	var center = new Ext.Panel({
//		title:"中间",
//		region:"center"
//	});
//	
//	var west = new Ext.Panel({
//		title:"西方",
//		region:"west",
//		width:200,
//		split:true,
//		collapsible:true  //伸展收缩效果
//	});
//	
//	var east = new Ext.Panel({
//		title:"东方",
//		region:"east",
//		width:200,
//		split:true
//	});
//	
//	var vp = new Ext.Viewport({
//		layout:'border',
//		items:[north,west,east,center]
//	});
	
	var top = new Ext.Panel({
		region:'north',
		title:"标题",
		height:80,
		border:true,
		html:"LOGO",
		margins:'0 0 5 0'
	});
	
	var left = new Ext.tree.TreePanel({
		region:'west',
		collapsible:true,
		title:"数据结构",
		width:200,
		autoScroll:true,
		split:true
//		listners:{}
	});
	
	var root = new Ext.tree.TreeNode({
		text:"根结点"
	});
	var child1 = new Ext.tree.TreeNode({
		text:"子结点1",
		url:"a.jsp"
	});
	var child2 = new Ext.tree.TreeNode({
		text:"子节点2",
		url:"b.jsp"
	});
	var child3 = new Ext.tree.TreeNode({
		text:"子节点3",
		url:"c.jsp"
	});
	root.appendChild([child1,child2,child3]);
	left.setRootNode(root);
	
	var center = new Ext.TabPanel({
		region:'center',
		items:{
			id:"opt1",
			title:"Default Tab",
			html:"欢迎进入。。。"
		},
		enableTabScroll:true
	});
	center.setActiveTab("opt1");
	
	var bottom = new Ext.Panel({
		region:'south',
		title:'Information',
		collapsible:true,
		html:'版权所有，翻版必究',
		split:true,
		height:100,
		minHeight:100,
		bodyStyle:"padding:10px;font-size:12px;text-align:center"
	});
	
	var vp = new Ext.Viewport({
		layout:'border',
		items:[top,left,center,bottom]
	});
	
	//展开所有结点
	left.expandAll();
	
});


效果图：