`
happyqing
  • 浏览: 3212786 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • Ext
Extborder布局 
阅读更多

 

简单示例

效果图：

  

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>

 

  • 大小: 8.2 KB
分享到：
| Extjs4.2异步树样例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics