panel 布局 viewPort 简单介绍-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_12996/article/details/81861127

本文展示了如何使用 ExtJS 创建包含不同工具栏及按钮的面板实例，并介绍了一个可视区域容器的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function() {

			 new Ext.Panel({
			 renderTo:Ext.getBody(),
			 title:'面板头部header',
			 width:500,
			 height:600,
				 
			 html:'<h1>面板主区域</h1>',
			 tbar:[{
			 pressed:true,
			 text:'刷新'
				 
				  
			 }],
			 bbar:[{
			 text:'底部工具栏bottomToolbar'
			 }],
			 buttons:[{
			 text:'按钮位于footer'
			 }]
			 })
	
	

			new Ext.Viewport({//可视区域的特殊容器（浏览器可视区域）
						//renderTo : Ext.getBody(),//可以不要
						enableTabScroll : true,
						layout : 'fit',// 自适应布局方式
						items : [{
									title : '面板',
									html : '',
									bbar : [{
												text : '按钮1',
												pressed:true
												
											}, {
												text : '按钮2',
												pressed:true
												
											}]
								}]
					})

		})

<%@ page language="java" contentType="text/html; charset=gb2312"
	pageEncoding="gb2312"%>
<%
	request.setAttribute("base", request.getContextPath());
%>

<html>
	<head>
		
		<title>面板</title>
		<link rel="stylesheet" type="text/css"
			href="${base}/script/ext/resources/css/ext-all.css">
		<script type="text/javascript"
			src="${base}/script/ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
		<script type="text/javascript" src="${base}/script/sample/third.js"></script>
		
	</head>
	<body>
		
		
	</body>
</html>