Viewport一个表示程序可视区域的特殊容器（浏览器可视区域）。

          视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link Ext.Panel 面板}增加到viewport，通过她的items，或者通过她的子面板（子面板也都可以拥有自己的layout）的items，子面板的add方法，这种设计让内部布局的优势非常明显。

          Viewport不支持滚动，所以如果子面板需要滚动支持可以使用autoScroll配置。

           

          下面展示一个很经典的border布局的Viewport程序示例。

          效果截图 ：



下面我们就来显示这样的一个效果：

viewport.js

Ext.onReady(function() {
	// Viewport会自动渲染到body上
	new Ext.Viewport({
		layout : "border",
		items : [ {
			region : "north",
			title : "顶部工具栏",
			height : 100
		}, {
			region : "west",
			title : "菜单",
			width : 100
		}, {
			region : "center",
			title : "主区域"
		} ]
	});
	// 创建一个Viewport
	new Ext.Viewport({
		// 指定viewport的布局方式
	    layout: 'border',
	    items: [{
	    	// 指定布局到北边
	        region: 'north',
	        html: '<h1 class="x-panel-header">页面标题栏</h1>',
	        // autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。
	        autoHeight: true,
	        // border: false的设定表示不要边框
	        border: false,
	        // 表示上、右、下、左的间距，也就是顺时针的间距
	        margins: '0 0 5 0'
	    }, {
	    	// 表示渲染到左边（西边）
	        region: 'west',
	        // 指定可以收缩展开
	        collapsible: true,
	        // 标题
	        title: '左侧菜单栏',
	        // 指定组件的类型是TreePanel
	        xtype: 'treepanel',
	        // 宽度是200
	        width: 200,
	        // autoScroll: true的设定表示自动根据其中的内容要不要产生滚动条
	        autoScroll: true,
	        // split: true的设定表示该组件在与其他的组件中间间隔课拉拽
	        split: true,
	        // 树加载器
	        loader: new Ext.tree.TreeLoader(),
	        // 创建树的根节点
	        root: new Ext.tree.AsyncTreeNode({
	            expanded: true,
	            children: [{
	                text: '菜单选项一',
	                leaf: true
	            }, {
	                text: '菜单选项二',
	                leaf: true
	            }, {
	                text: '菜单选项三',
	                leaf: true
	            }]
	        }),
	        // rootVisible: false 的设定表示不显示树根节点，这是不可以收缩和展开的
	        rootVisible: false,
	        // 设定事件监听器
	        listeners: {
	        	// 处理单击事件
	            click: function(n) {
	                Ext.Msg.alert('Navigation Tree Click', '你单击了: "' + n.attributes.text + '"');
	            }
	        }
	    }, {
	    	// 在中间放置一个tabpanel
	        region: 'center',
	        xtype: 'tabpanel',
	        activeTab : 0,
	        items: {
	            title: '选项面板一',
	            html: 'The first tab\'s content. Others may be added dynamically'
	        }
	    }, {
	    	// 在底部（南面）放置一面板（没有指定xtype则默认是panel）
	        region: 'south',
	        title: '简介信息',
	        collapsible: true,
	        html: 'Information goes here',
	        split: true,
	        height: 100,
	        minHeight: 100
	    }]
	});

});

viewprt.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext-viewport示例</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="viewport.js"></script>
</head>
<body>

</body>
</html>



 

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生