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’ //添加热链接);
}));
});
其结果如下图所示：
分享到：
相关推荐
ExtJS4.1学习心得及源码 目录 一、安装与配置 二、第一个ExtJS例子 三、表格 ...八、Viewport 九、表单Form 十、窗口 十一、消息对话框 十二、ExtJS与Webservice应用 十三、自定义组件 十四、地图
第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第十二讲.ExtJS之Ext常用函数 第十三讲.ExtJS之Ext常用函数（二） 第十四讲.初识Ajax 第十五讲.ExtJS对Ajax支持-注册用户实例 第十六讲.ExtJS对Ajax...
第二十八章：Viewport类 221 一、概述 221 二、Viewport的基本使用 221 三、小结 226 第二十九章：综合项目 227 一、概述 227 二、数据库设计 228 三、持久层封装 229 四、DAO 235 五、业务层 238 六、控制器Action ...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
通常我们用 Python 绘制的都是二维平面图，但有时也需要绘制三维场景图，比如像下面这样的： 这些图怎么做出来呢？今天就来分享下如何一步步绘制出三维矢量（SVG）图。 八面体 我们先以下面这个八面体为...然后生成八
Viewport 移动设备上的Viewport就是设备的屏幕上能用来显示网页的一块区域，即浏览器上用来显示网页的那部分区域。Viewport不局限于浏览器可视区域的大小，可能比浏览器的可视区域要大，也可能比浏览器的可视区域要...
移动选择区域 手机联动选择地区效果图如下： 例子见[DEMO]（ ） ...meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="styleshe
jquery-日历 jQuery 日历插件 克隆只需使用： ...要使用确保你有一个指向 jQuery 的链接并像这样调用一个元素： $(element).aCal();... meta name =" viewport " content =" width=device-width, initial-scale=1.0
11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 {, o8 W1 s! I6 ^3 k 13、ExtJS之Ext常用函数（二）' o, e2 G$ D7 @" ?- [! E 14、初识Ajax& i O, A2 I, c6 G: c- Q) K...
……19 3.3 视图区ViewPort……………………………………………………………………………………………….…….19 第四章 窗口Window及对话框MessageBox………………………………………………………….………....
meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ ...
七、ViewPort....................................................................................................................... 16 八、窗口Window......................................................