Ext4.2首页border布局东南西北中简单示例

 

简单示例

效果图:
Ext4.2首页border布局东南西北中简单示例_第1张图片
  

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}&nbsp;<a href="<%=path%>/logout">退出</a>
	</div>
</body>
</html>

 

你可能感兴趣的:(ext,border,布局)