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  //是否可以折叠
}]
});
});