这篇博客详细介绍了ExtJs的页面布局，包括ContainerLayout、FormLayout、ColumnLayout、BorderLayout、AccordionLayout、FitLayout和TableLayout等，通过实例展示了各种布局的效果，并提供了一个fitlayout的代码示例，强调了fitlayout只能显示一个子组件的特点。
首先解释什么是布局：
来自百度词典的官方解释：◎ 布局 bùjú： [distribution;layout] 对事物的全面规划和安排，布：陈设；设置。
我对布局理解是“把**东西放在**位置显示”[动词]。
ok，我们这节课就讲一下怎么样把 ExtJs 的组件，放到我们想放置的位置。
一、常用布局
(1)ContainerLayout：默认布局方式，其他布局继承该类进行扩展功能。显示：将内部组件以垂直方式叠加。如下所示：
组件一.....
组件二.....
(2)FormLayout：产生类似表单的外观。显示：将内部组件以垂直方式叠加。如上所示：
(3)ColumnLayout：将组件以水平方式放置。如下所示：
组件一[第一列] 组件二[第二列] 组件三[第三列]
(4)BorderLayout：一个盒子里摆放5个位置，东、南、西、北、中[即：上下左右中间]。开发的时候经常用来做后台框架的布局，如下所示：
北
西 中 东
南
(5)AccordionLayout：手风琴布局，可以折叠的布局。开发的时候常用来对左侧的功能列表进行分类，如下图所示：
折叠状态---
展开状态[包含内容一和二]---
内容一--
内容二--
折叠状态---
(6)FitLayout：强迫子组件填充满容器布局。
(7)TableLayout：表格布局，含有行与列的概念。
二、实例
1. index.jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
<script type="text/javascript" src='study/formPanel.js'></script>
<script type="text/javascript" src='study/textField.js'></script>
<script type="text/javascript" src='study/button.js'></script>
<script type="text/javascript" src='study/login.js'></script>
-->
<!--调用/study/employee_information.js 实现员工信息页面 -->
<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
<script type="text/javascript" src="study/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src='study/layout.js'></script>
<style type="text/css">
.loginicon
{
background-image: url(study/login.gif) !important;
}
</style>
<style type='text/css'>
.x-form-unit
{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline;
}
</style>
</head>
<body>
<!--------------------- 上层 -->
<!-- 这里使用ContainerLayout: 垂直方式布局 -->
<div id='ContainerLayout' style='float:left;width:300px'></div>
<!-- padding-left 是用来填充间隔,如果没有则两个容器/组件会完全挨着 -->
<div id='hello' style='float:left;width:300px;padding-left: 10px'></div>
<div id='right-upward' style='float:left;width:700px;padding-left:15px'></div>
<!--------------------- 中间------------------------------------>
<div id='BorderLayout' style='padding: 20px 0px 0px 0px;clear:both'></div>
<!--------------------- 底层------------------------------------>
<div id='accordionLayout' style='float:left;padding:20px 0px;width:300px;height:200px'></div>
<!-- 两个Panel渲染同一div,不会相互覆盖,会上下依次显示 -->
<div id='fitLayout' style='float:left; padding:20px 0px 0px 20px;height:30px'></div>
<!-- 表格布局 -->
<div id='tableLayout' style='float:left; padding:20px 0px 0px 20px;height:30px;width:100px'></div>
</body>
</html>
2. layout.js
Ext.onReady(function(){
//------------------------ContainerLayout 容器布局第一列开始----------------//
//定义一个容器
new Ext.Container({
layout:'form',
items:[
//定义Box组件
new Ext.BoxComponent({
autoEl:{ //注意这里的El 是字母l, 不是数字1 ,
tag:'div',
style:'background:red;width:300px;height:30px',
html:'box1'
}
}),
//定义Box组件
new Ext.BoxComponent({
autoEl:{
tag:'div',
style:'background:blue;width:300px;height:30px;color:#fff',
html:'box2'
}
}),
//定义Box组件
new Ext.BoxComponent({
autoEl:{
tag:'div',
style:'background:yellow;width:300px;height:30px',
html:'box3'
}
})
],
renderTo:'ContainerLayout'
});
//------------------------ContainerLayout 容器布局第一列开始----------------//
//-------------------------上方头第二列开始-------------------------//
//Panel 和 formPanel 之间的区别似乎只在于,Panel 需要指定layout 配置项,若不指定默认会横向依次摆放，想纵项一定要配置项layout:'form'
//formPanel 默认配置项为layout:'form'
new Ext.Panel({
renderTo:'hello',
title:'Header',
frame:true,
layout:'form', //如果没有layout:'form', items里面的两个TextField会依次横向排列。相反加上后会纵向依次列出
tools:[{id:'save'},{id:'help'},{id:'print'}],
items:[
new Ext.form.TextField({
fieldLabel:'Name',
allowBlank:false,
blankText:'This field is required..'
}),
new Ext.form.TextField({
fieldLabel:'Pwd'
})
]
});
//-------------------------上方头第二列结束-------------------------//
//-------------------------上方头第三列开始-------------------------//
//表单Panel里面还可以包含FormPanel
new Ext.Panel({
renderTo:'right-upward',
title:'Panel window Column Layout!',
layout:'column',
frame:true,
items:[
//文本域, 当布局为column时,fieldLabel的名字就不起作用了
new Ext.form.TextField({
fieldLabel:'Name',
allowBlank:false
}),
//文本域,
new Ext.form.FormPanel({
title:'The second column',
frame:true,
width:260,
labelWidth:50,
//bodyStyle:'padding:0px 0px 0px 0px',
items:[
//复选框
new Ext.form.CheckboxGroup({
fieldLabel:'Sex',
items:[
new Ext.form.Checkbox({
boxLabel:'Man',
checked:true
}),
new Ext.form.Checkbox({
boxLabel:'Woman'
})
]
})
]
}),
//表单域, password
new Ext.form.FormPanel({
title:'The third column',
frame:true,
width:240,
labelWidth:30,
items:[
new Ext.form.TextField({
fieldLabel:'PWD'
})
]
})
]
});
//-------------------------上方头第三列结束-------------------------//
//-------------------------中间开始-------------------------//
new Ext.Panel({
title:'BorderLayout',
//frame:true,
renderTo:'BorderLayout',
layout:'border',
width:1320,
height:260,
items:[
//上北部分,
new Ext.Panel({
title:'North',
region:'north',
frame:true,
html:'Put a logo here'
}),
//下南部分,
new Ext.Panel({
title:'South',
region:'south',
frame:true,
html:'version'
}),
//中间部分, 必须项,如果没有Center, 左侧东部分, 右侧西部分都不能正常显示
new Ext.Panel({
title:'Middle',
frame:true,
region:'center'
}),
//左侧东侧部分,
new Ext.Panel({
title:'East',
region:'east',
frame:true,
html:'common function'
}),
//右侧西侧部分,
new Ext.Panel({
title:'West',
frame:true,
region:'west'
})
]
});
//-------------------------中间结束-------------------------//
//-------------------------下层开始-------------------------//
//下层左侧显示
new Ext.Panel({
title:'AccordionLayout',
renderTo:'accordionLayout',
layout:'accordion',
height:200,
items:[
//用户管理
new Ext.Panel({
title:'User manager',
html:'User manager'
}),
//角色管理
new Ext.Panel({
title:'Role manager',
html:'Role manager'
}),
//系统管理
new Ext.Panel({
title:'System Manager',
html:'System Manager'
})
]
});
//下层中间显示
//以下两个Panel渲染同一div,不会相互覆盖,会上下依次显示
//使用fitLayout布局会将组件内全部充满颜色
new Ext.Panel({
title:'FitLayout',
layout:'fit',
renderTo:'fitLayout',
width:300,
height:100,
items:[
new Ext.BoxComponent({
autoEl:{
tag:'div', //使用默认div形式
style:'background:green',
html:'Use fitLayout to fill'
}
}),
new Ext.BoxComponent({
autoEl:{
tag:'div',
style:'backgroud:red',
html:'这个不会被显示,因为是fit布局'
}
})
]
});
//以上两个Panel渲染同一div,不会相互覆盖,会上下依次显示
//未使用fitLayout布局, 只会字体下面有颜色,不会全部渲染
new Ext.Panel({
title:'NotUseFitLayout',
renderTo:'fitLayout',
width:300,
height:100,
items:[
new Ext.BoxComponent({
autoEl:{
tag:'div',
style:'background:blue',
html:'Not use fitLayout'
}
})
]
});
//下层右侧显示
new Ext.Panel({
title:'tableLayout',
renderTo:'tableLayout',
layout:'table',
width:650,
layoutConfig:{columns:4}, //初次使用这个配置项！
defaults:{ //初次使用这个配置项！
width:133,
height:50,
autoEl:'center'
},
defaultType:'panel', //初次使用这个配置项！
items:[
{html:'First line,first column'},
{html:'First line,second column'},
{html:'First line,third column',rowspan:2,height:150},
{html:'First line four',rowspan:3,height:150},
{html:'Second line',colspan:2, width:286},
{html:'Third line',colspan:3,width:283}
]
})
//-------------------------下层结束-------------------------//
});
3.说明：
fitlayout只能有一个子组件显示，如上222行所示，我在里面创建了两个panel，但只有第一个显示。
4. 效果如下：
5. 项目代码请从附件[extjs.zip] 中下载, 实例所涉及到的代码文件为以下两个：
index.jsp 位于WebRoot/index.jsp
layout.js 位于 WebRoot/study/layout.js
扫一扫
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
