八、Viewport
Viewport是一个表示程序可视区域的容器，它会直接渲染在HTML的body上，并且可以根据浏览器可视区域的大小自动调整窗口，但是一个网页中只允许存在一个Viewport，若要添加面板，则通过它的items来添加。上一例中添加了两个Panel到第三个Panel中，本例将这两个Panel添加到Viewport中。首先新建一个Viewport.html网页，其内容如下：
<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01//EN”>
<html>
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=UTF-8; user-scalable=no”>
<title>Viewport</title>
<link rel=”stylesheet”type=”text/css” href=”resources/css/ext-all.css”/>
<scripttype=”text/javascript” src=”bootstrap.js”></script>
<script type=”text/javascript” src=”Viewport.js”></script>
</head>
<body>
</body>
</html>
然后新建一个Viewport.js文件，在里面添加Viewport，如下：
Ext.onReady(function(){
var myView =Ext.create(‘Ext.Viewport’,{
layout:’border’,
items:[]
});
});
其结果如下图所示：
由于只添加了Viewport，所以什么都看不见。下面在Viewport的items中添加面板，如下：
Ext.onReady(function(){
var myView =Ext.create(‘Ext.Viewport’,{
layout:’border’,
items:[Ext.create(‘Ext.form.Panel’,{
title:’我的第一个Panel’, //标题
width:200, //宽度
split:true, //可以收缩
region:‘west’, //在左侧，西边
collapsible:true, //可以收缩
html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’
})]
});
});
这里添加的Panel代码与上一例中创建第一个Panel一样，其结果图形题所示：
如果在添加第二个Panel，并设置其居中，同样在items里面添加，代码如下：
Ext.onReady(function(){
var myView =Ext.create(‘Ext.Viewport’,{
layout:’border’,
items:[Ext.create(‘Ext.form.Panel’,{
title:’我的第一个Panel’, //标题
width:200, //宽度
split:true, //可以收缩
region:‘west’, //在左侧，西边
collapsible:true, //可以收缩
html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’
}),
Ext.create(‘Ext.form.Panel’, { //添加第二个panel
title: ‘第二个Panel’,
region: ‘center’,
autoScroll :true,
html:’你好，欢迎使用Panel2！<br/>这个是第二个Panel’
})]
});
});
其结果如下图所示：
同样，在Panel中可能还需要添加或动态添加其他控件，如按钮或标签等，则在Viewport中新建这些Panel的时候就定义其变量名，如在第一个Panel中添加一个按钮，如下代码：
Ext.onReady(function(){
var myPanel01, myPanel02;
var myView =Ext.create(‘Ext.Viewport’,{
layout:’border’,
items:[myPanel01=Ext.create(‘Ext.form.Panel’,{
title:’我的第一个Panel’, //标题
width:200, //宽度
split:true, //可以收缩
region:‘west’, //在左侧，西边
collapsible:true, //可以收缩
autoScroll:true,
html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’
}),
myPanel02=Ext.create(‘Ext.form.Panel’, { //添加第二个panel
title:‘第二个Panel’,
region:‘center’,
autoScroll:true,
html:’你好，欢迎使用Panel2！<br/>这个是第二个Panel’
})]
});
myPanel01.add(Ext.create(‘Ext.Button’,//添加一个按钮
{
id:’button01’,
text:’这是一个按钮’,
height: 30,
width: myPanel01.width,
href :’http://www.ctgu.edu.cn’ //添加热链接);
}));
});
其结果如下图所示：
