Ext4.2首页border布局东南西北中简单示例
程序员文章站
2022-06-16 21:34:26
...
简单示例
效果图：
JSP：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% String path = request.getContextPath(); %>
<!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>开发平台3</title>
<link href="<%=path%>/static/ext-4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<script src="<%=path%>/static/ext-4.2.1/bootstrap.js"></script>
<script src="<%=path%>/static/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
//Ext.create('Ext.panel.Panel', {
// width: 500,
// height: 300,
// title: 'Border Layout',
// layout: 'border',
items: [{
title: 'North',
region: 'north', // position for region
xtype: 'panel',
height: 100,
collapsible: true,
margins: '0 0 5 0',
items: [{
contentEl: 'north'
}]
}
,{
//title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 30,
split: true, // enable resizing
margins: '0 0 0 0'
}
,{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
split: true,
margins: '0 0 0 0',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '0 0 0 0'
}]//,
//renderTo: Ext.getBody()
})
});
</script>
</head>
<body>
<div id="north" class="x-hide-display">
<c:out value='${stauts}'/><br />
你好：${user.username} <a href="<%=path%>/logout">退出</a>
</div>
</body>
</html>
