Ext Js 3.2 Viewport使用

1:Ext.viewport

     它是一个可视区域的特殊容器,初始化Viewport会布满整个浏览器可视化区域,并且它会根据浏览器的大小自动调整并且管理窗口的大小变化,一个页面上只允许存在一个

Viewport

     Ext.layout.BorderLayout就是Viewport不二的布局风格类型,自然,初始化Viewport就是初始化东(east), 西(west), 南(south), 北(north)和中央(center)五大块区域。

代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>FitLayout</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext3.2/ext-all.js"></script>
	<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
	    Ext.onReady(function() {
			new Ext.Viewport({
				  layout: 'border',   //指定布局格式为border
				  items: [{
					  title: 'West',
					  region: 'west',
					  width: 200,
					  collapse: true,
					  split: true,
					  html: '菜单栏'
				  }, {
					  region: 'center',
					  xtype: 'tabpanel',
					  items: [{
						  title: '第一个tab',
						  html: 'The first tab\'s content. Others may be added dynamically'
					  }, {
						  title: '第二个tab',
						  html: '第二个tab'
					  }]
				  }, {
					  region: 'south',
					  title: 'south',
					  html: '我是底部',
					  split: true
				  }]
              });
		  });
	</script>
  </head>
  <body>
  
  </body>
</html>


2:程序效果图

 

Ext Js 3.2 Viewport使用_第1张图片

你可能感兴趣的:(html,浏览器,String,ext,border,stylesheet)