ExtJS ViewPort的使用

       ViewPort代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条，那么应该在其子面板中进行设置。

ViewPort静态效果显示

//静态效果显示
Ext.onReady(function(){
	Ext.create("Ext.container.Viewport",{
		layout:"border",//表格布局
		items:[{
			title:"North Panle",
			html:"上边",
			region:"north",//指定子面板所在区域为north
			height:100,
			collapsible:true  //是不是可以折叠  
		},{
			title:"West Panle",
			html:"左边",
			region:"west",//指定子面板所在区域为west
			width:100,
			collapsible:true  //是不是可以折叠  
		},{
			title:"Main Content",
			html:"中间",
			region:"center",//指定子面板所在区域为center
			collapsible:true  //是不是可以折叠  
		},{
			title:"East Content",
			html:"右边",
			region:"east",//指定子面板所在区域为center
			width:100,
			collapsible:true  //是不是可以折叠  
		},{
			title:"Bottom Panle",
			html:"下边",
			height:100,
			region:"south",//指定子面板所在区域为south
			collapsible:true  //是不是可以折叠  
		}]
	});
});

        一般情况下我们使用左侧菜单，动态的更新中间区域需要显示的页面或信息。下面的例子我们将介绍如何实现。

ViewPort静态效果显示案例，我们将页面分成了五个部分，为了实现左侧菜单动态更新中间显示的效果。左侧区域我们使用TreePanel，中间区域我们使用TabPanel。创建的过程如下：

创建TabPanel

//创建TabPanel
	var tabPanel = Ext.create("Ext.TabPanel",{
		title:"Main Content",
		region:"center",
		activeTab:0,
		collapsible:true, //是否可以折叠 
//		html:"Main Content02",
	});

创建TreePanel，并为其添加点击监听。

//创建TreePanel
	var treePanel = Ext.create("Ext.tree.TreePanel",{
		title:"West Panle",
//		html:"左边",
		region:"west",//指定子面板所在区域为west
		width:150,
		collapsible:true,  //是否可以折叠   
		autoScroll:true,	//自动滚动条
		animate:true,	//动画效果
		rootVisible:true,	//根节点是否可见
		lines:true,	//节点之间使用横竖线连接
		root:{
			text:"网址管理",
			id:"root",
			children:[{
				text:"百度地址",
				id:"http://www.baidu.com",
				leaf:false,
				children:[{
					text:"百度新闻",
					id:"http://news.baidu.com",
					leaf:true
				}]
			},{
				text:"新浪地址",
				id:"http://www.sina.com.cn",
				leaf:true
			}]
		},
		listeners:{
			"itemclick":function(v,r,item){
				var n = tabPanel.getComponent(r.raw.id);
				if(!r.raw.leaf){ //非叶子节点，不进行操作
					return; 
				}
		        if(!n){
		        	n = tabPanel.add({
		        		"id" : r.raw.id,  
	                    "title" : r.raw.text,  
	                     closable : true, // 通过html载入目标页  
	                     html : "<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=""+r.raw.id+""></iframe>"
		        	});
		        }
		        tabPanel.setActiveTab(n);
			}
		}
	});

        原始的ViewPort静态效果显示代码，更改为如下:

左侧菜单动态添加中间显示内容

//Sample-020 左侧菜单动态添加中间显示内容
Ext.onReady(function(){
	//创建TabPanel
	var tabPanel = Ext.create("Ext.TabPanel",{
		title:"Main Content",
		region:"center",
		activeTab:0,
		collapsible:true, //是否可以折叠 
//		html:"Main Content02",
	});
	
	//创建TreePanel
	var treePanel = Ext.create("Ext.tree.TreePanel",{
		title:"West Panle",
//		html:"左边",
		region:"west",//指定子面板所在区域为west
		width:150,
		collapsible:true,  //是否可以折叠   
		autoScroll:true,	//自动滚动条
		animate:true,	//动画效果
		rootVisible:true,	//根节点是否可见
		lines:true,	//节点之间使用横竖线连接
		root:{
			text:"网址管理",
			id:"root",
			children:[{
				text:"百度地址",
				id:"http://www.baidu.com",
				leaf:false,
				children:[{
					text:"百度新闻",
					id:"http://news.baidu.com",
					leaf:true
				}]
			},{
				text:"新浪地址",
				id:"http://www.sina.com.cn",
				leaf:true
			}]
		},
		listeners:{
			"itemclick":function(v,r,item){
				var n = tabPanel.getComponent(r.raw.id);
				if(!r.raw.leaf){ //非叶子节点，不进行操作
					return; 
				}
		        if(!n){
		        	n = tabPanel.add({
		        		"id" : r.raw.id,  
	                    "title" : r.raw.text,  
	                     closable : true, // 通过html载入目标页  
	                     html : "<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=""+r.raw.id+""></iframe>"
		        	});
		        }
		        tabPanel.setActiveTab(n);
			}
		}
	});

	Ext.create("Ext.container.Viewport",{
		layout:"border",//表格布局
		items:[{
			title:"North Panle",
			html:"上边",
			region:"north",//指定子面板所在区域为north
			height:100,
			collapsible:true  //是否可以折叠   
		},treePanel,tabPanel,{
			title:"East Content",
			html:"右边",
			region:"east",//指定子面板所在区域为center
			width:100,
			collapsible:true  //是否可以折叠   
		},{
			title:"Bottom Panle",
			html:"下边",
			height:100,
			region:"south",//指定子面板所在区域为south
			collapsible:true  //是否可以折叠   
		}]
	});
});