extjs Viewport笔记

落日映苍穹つ 2022-02-17 14:11 207阅读 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>

运行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWp1bm5h_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWp1bm5h_size_16_color_FFFFFF_t_70]: /images/20220217/9f02fb63d1174e1bae4c719e0165e451.png