extjs Viewport笔记

xiejunna

于 2019-04-19 17:59:41 发布

阅读量576

点赞数

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.csdn.net/xiejunna/article/details/89405496

版权

extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Viewport可视应用程序区域（浏览器视区）的专用容器。
Viewport将自身呈现到文档主体，并自动将自身调整为浏览器可视区的大小，并管理窗口大小调整。一个页面中只能创建一个Viewport。
与任何ext.container.container一样，如果使用布局配置，则Viewport将只对其子组件执行大小调整和定位。
与Viewport一起使用的常见布局是ext.layout.container.border，但如果所需布局更简单，则应选择其他布局。
例如，要使单个子项占用所有可用空间，请使用ext.layout.container.fit。
要从多个子项中选择一个全尺寸显示一个“活动”项，请使用ext.layout.container.card。
内部布局可用，因为通过其cfg项或其任何子面板的方法add方法添加到视区的所有ext.panel.panels本身都可能具有布局。
Viewport不提供滚动，因此Viewport内的子面板应提供滚动（如果需要）使用可滚动配置。
显示应用程序边框布局的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      	<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></script>
      	<script>
      		Ext.onReady(function(){
      			
      			console.log("ext init");
      			
      			Ext.create('Ext.container.Viewport', {
				    layout: 'border',
				    items: [{
				        region: 'north',
				        html: '<h1 class="x-panel-header">Page Title</h1>',
				        border: false,
				        margins: '0 0 5 0'
				    }, {
				        region: 'west',
				        collapsible: true,
				        title: 'Navigation',
				        width: 150
				        // 这里通常可以使用 TreePanel 或者 AccordionLayout布局的导航菜单
				    }, {
				        region: 'south',
				        title: 'South Panel',
				        collapsible: true,
				        html: 'Information goes here',
				        split: true,
				        height: 100,
				        minHeight: 100
				    }, {
				        region: 'east',
				        title: 'East Panel',
				        collapsible: true,
				        split: true,
				        width: 150
				    }, {
				        region: 'center',
				        xtype: 'tabpanel', // TabPanel本身没有title属性
				        activeTab: 0,      // 配置默认显示的激活面板
				        items: {
				            title: 'Default Tab',
				            html: 'The first tab\'s content. Others may be added dynamically'
				        }
				    }]
				});
				
				
      		});
      	</script>
	</head>
	<body>
	</body>
</html>

运行结果
在这里插入图片描述

xiejunna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs Viewport笔记

Viewport可视应用程序区域（浏览器视区）的专用容器。Viewport将自身呈现到文档主体，并自动将自身调整为浏览器可视区的大小，并管理窗口大小调整。一个页面中只能创建一个Viewport。与任何ext.container.container一样，如果使用布局配置，则Viewport将只对其子组件执行大小调整和定位。与Viewport一起使用的常见布局是ext.layout.contai...
复制链接

扫一扫