Ext Js入门第10篇-使用Ext.container.Viewpost整体布局

               Ext.container.Viewport是一款非常常用的布局容器，它会自动把自己输出到HTMl页面，而且在页面的上中下左右中5个布局

<script>
	    Ext.onReady(function()
	    {
	    	//创建一个TreeStore，TreeStore负责为Tree提供数据
	    	var store=Ext.create('Ext.data.TreeStore',
	    	{
	    		root:{
	    			expanded:true,
	    			children:[
	    			   {
	    			   	   text:"疯狂系列",expanded:true,children:[
	    			   	       {id:1,text:"疯狂java讲义",leaf:true},
	    			   	       {id:2,text:"spring",leaf:true},
	    			   	       {id:3,text:"mybatis",leaf:true}
	    			   	   ]
	    			   },
	    			   {
	    			   	    text:"补充图书",expanded:true,children:[
	    			   	        {id:4,text:"权威指南",leaf:true},
	    			   	        {id:5,text:"学习指南",leaf:true}
	    			   	    ]
	    			   }
	    			]
	    		}
	    	});
	    	Ext.create('Ext.container.Viewport',
	    	{
	    		layout:'border',
	    		items:[
	    		    //上面区域
	    		    {
	    		    	region:'north',
	    		    	html:'<div style="width:900px"><a href="http://www.fkjava.org"><img alt="疯狂java" src="logo.gif"/></a><a href="http://www.fkjava.org"><img alt="疯狂教育" src="banner.gif"></a></div>',
	    		    	height:90,
	    		    	border:false,
	    		    	margins:'0 0 5 0'
	    		    },
	    		    //左边区域
	    		    {
	    		    	region:'west',
	    		    	xtype:'treepanel',//表明这是Ext.tree.Panel
	    		    	title:'疯狂java体系',
	    		    	listeners:{
	    		    		//为itemclick时间添加监听器
	    		    		itemclick:function(view,record,item){
	    		    			//如果是叶子节点
	    		    			if(record.data.leaf){
	    		    				//获取页面中的my_center组件，该组件是Ext.tab.Pannel组件
	    		    				var tabPanel=Ext.getCmp('my_center');
	    		    				//如果页面中没有该图书id对应组件
	    		    				if(!Ext.getCmp(record.data.id)){
	    		    					//向Ext.tab.panel组件中插入一个新的tab页面
	    		    					var tab=tabPanel.add(
	    		    					{
	    		    						//设置新tab页面的属性
	    		    						id:record.data.id,
	    		    						title:record.data.text,
	    		    						html:record.data.text,
	    		    						closable:true
	    		    					});
	    		    				}
	    		    				//激活正在查看的图书
	    		    				tabPanel.setActiveTab(record.data.id);
	    		    				//向下边区域的Ext.panel.Panel组件中插入内容
	    		    				Ext.getCmp('info').add({
	    		    					html:'正在操作《'+record.data.text+'》图书!'
	    		    				});
	    		    			}
	    		    		}
	    		    	},
	    		    	width:200,
	    		    	store:store,
	    		    	rootVisible:false
	    		    },
	    		    //下边区域内容，使用一个普通Ext.panel.Panel
	    		    {
	    		    	id:'info',
	    		    	region:'south',
	    		    	title:'操作信息',
	    		    	collapsible:true,
	    		    	split:true,
	    		    	height:100,
	    		    	minHeight:100
	    		    },
	    		    //右边区域
	    		    {
	    		    	region:'east',
	    		    	title:'右边栏',
	    		    	collapsible:true,
	    		    	split:true,
	    		    	width:150
	    		    },
	    		    //中间面板
	    		    {
	    		    	region:'center',
	    		    	id:'my_center',
	    		    	xtype:'tabpanel',
	    		    	activeTab:0,
	    		    	items:{
	    		    		title:'首页',
	    		    		html:'学习Ext.container.Viewport的例子'
	    		    	}
	    		    }
	    		]
	    	});
	    });
	</script>