首先解释什么是布局：
来自百度词典的官方解释：◎ 布局 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
相关推荐
《无废话ExtJs系列教程十五：树：TreePanel》 ExtJs是一个强大的JavaScript库，用于构建富客户端Web应用。在本教程中，我们将深入探讨一个重要的组件——TreePanel，它是ExtJs用来展示层次结构数据的工具，常用于...
在"无废话ExtJS系列教程十八[继承：Extend]"中，我们主要关注的是ExtJS中的类继承机制，这是一个核心特性，它允许开发者创建可复用和可扩展的组件结构。在JavaScript中，继承是通过原型链实现的，而在ExtJS中，它被...
在"无废话ExtJS 系统教程十四[列表：GridPanel]"中，我们将会深入探讨如何有效地使用GridPanel来创建高效的、功能丰富的数据列表。 GridPanel是ExtJS中的核心组件之一，它允许用户以表格形式展示大量数据，并支持...
本教程将深入探讨ExtJS中的Combobox组件，包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成：文本输入框和下拉列表。用户可以在输入框中键入文字，或者...
总之，"无废话ExtJs 系统教程十九[动态复选框：RemoteCheckboxGroup]"是一个帮助开发者掌握如何在ExtJS应用中实现动态复选框组件的资源。通过学习和实践，你可以创建出更加灵活和高效的用户界面，同时利用源码和工具...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档，详细讲诉了各种布局，并附源码与界面展示，希望能给你带来帮助
用extjs4搭的一个简单布局框架
【标题】"无废话ExtJs 教程十二[员工信息表Demo：AddUser]"是一个针对初学者和进阶者设计的教程，旨在帮助他们更好地理解和应用ExtJS框架创建员工信息管理系统的添加用户功能。在本教程中，我们将深入探讨如何使用...
Extjs经典教程，关于面板布局的学习资料，图文并茂，值得一看
看到其它地方 分太高，问大家省点分. 只有代码，视频请百度看. 第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件... 第三十讲:extjs4.0的desktop使用讲解
Extjs教程源码 介： ***************第一部分基础知识**************** 第一讲: EXTJS4.0概述和HelloWorld程序 ...第三十讲: EXTJS4.0的Desktop使用讲解 本资料共包含以下附件： EXTJS4.0视频教程配套代码.zip
ExtJS布局是构建用户界面的关键部分，它定义了组件如何在容器中排列和展示。本文将详细介绍ExtJS的9种布局样式，帮助开发者更好地理解和应用这些布局。 1. **Absolute Layout**： Absolute布局允许你在容器内根据...
在EXTJS中，布局（Layout）是控制组件如何在容器中排列和展示的关键概念。"Table Layout"是EXTJS中的一种布局方式，主要用于创建表格形式的组件布局。 在EXTJS中，控件（Components）是构建用户界面的基本单元，...
### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架，专门用于构建富互联网应用（RIA）。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...
ExtJS布局是构建用户界面的关键部分，特别是在使用ExtJS库时。本文主要讲解ExtJS的Column布局，一种非常灵活的布局方式，可以帮助开发者创建复杂的、响应式的用户界面。 Column布局在ExtJS中用于将容器（如Panel）...
很好的ext页面布局自动生成功能，快速布局，减少你页面开发时间！用法：解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了，代码在查看/修改中可以看到，只需复制粘贴到自己...