首先解释什么是布局：
来自百度词典的官方解释：◎ 布局 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
相关推荐
win7修复本地系统工具
《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt
《计算机专业英语》chapter12-Intelligent-Transportation.ppt
内容概要：本文详细介绍了基于西门子S7-1200博图平台的3轴伺服螺丝机程序。该程序使用SCL语言编写，结合KTP700组态和TIA V14及以上版本，实现了对X、Y、Z三个轴的精密控制。文章首先概述了程序的整体架构，强调了其在自动化控制领域的高参考价值。接着深入探讨了关键代码片段，如轴初始化、运动控制以及主程序的设计思路。此外，还展示了如何通过KTP700组态实现人机交互，并分享了一些实用的操作技巧和技术细节，如状态机设计、HMI交互、异常处理等。 适用人群：从事自动化控制系统开发的技术人员，尤其是对西门子PLC编程感兴趣的工程师。 使用场景及目标：适用于希望深入了解西门子S7-1200博图平台及其SCL语言编程特点的学习者；旨在帮助读者掌握3轴伺服系统的具体实现方法，提高实际项目中的编程能力。 其他说明：文中提供的代码示例和设计理念不仅有助于理解和学习，还能直接应用于类似的实际工程项目中。
内容概要：本文详细探讨了五种非线性滤波器（卡尔曼滤波(KF)、扩展卡尔曼滤波(EKF)、无迹卡尔曼滤波(UKF)、粒子滤波(PF)和变维卡尔曼滤波(VDKF)）在水下长基线定位（LBL）系统中的应用。通过对每种滤波器的具体实现进行MATLAB代码展示，分析了它们在不同条件下的优缺点。例如，KF适用于线性系统但在非线性环境中失效；EKF通过雅可比矩阵线性化处理非线性问题，但在剧烈机动时表现不佳；UKF利用sigma点处理非线性，精度较高但计算量大；PF采用蒙特卡罗方法，鲁棒性强但计算耗时；VDKF能够动态调整状态维度，适合信标数量变化的场景。 适合人群：从事水下机器人(AUV)导航研究的技术人员、研究生以及对非线性滤波感兴趣的科研工作者。 使用场景及目标：①理解各种非线性滤波器的工作原理及其在水下定位中的具体应用；②评估不同滤波器在特定条件下的性能，以便为实际项目选择合适的滤波器；③掌握MATLAB实现非线性滤波器的方法和技术。 其他说明：文中提供了详细的MATLAB代码片段，帮助读者更好地理解和实现这些滤波器。此外，还讨论了数值稳定性问题和一些实用技巧，如Cholesky分解失败的处理方法。
VMware-workstation-full-14.1.3-9474260
DeepSeek系列-提示词工程和落地场景.pdf
javaSE阶段面试题
《综合布线施工技术》第5章-综合布线工程测试.ppt
安川机器人NX100使用说明书.pdf
内容概要：本文详细介绍了将M7120型平面磨床的传统继电器控制系统升级为基于西门子S7-1200 PLC的自动化控制系统的过程。主要内容涵盖IO分配、梯形图设计和组态画面实现。通过合理的IO分配，确保了系统的可靠性和可维护性；梯形图设计实现了主控制逻辑、砂轮升降控制和报警逻辑等功能；组态画面则提供了友好的人机交互界面，便于操作和监控。此次改造显著提高了设备的自动化水平、运行效率和可靠性，降低了维护成本。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是熟悉PLC编程和控制系统设计的专业人士。 使用场景及目标：适用于需要进行老旧设备升级改造的企业，旨在提高生产设备的自动化水平和可靠性，降低故障率和维护成本。具体应用场景包括但不限于金属加工行业中的平面磨床等设备的控制系统改造。 其他说明：文中还分享了一些实际调试中的经验和技巧，如急停逻辑的设计、信号抖动的处理方法等，有助于读者在类似项目中借鉴和应用。
chromedriver-linux64-136.0.7103.48.zip
IMG_20250421_180507.jpg
《网络营销策划实务》项目一-网络营销策划认知.ppt
Lianantech_Security-Vulnerabil_1744433229
MybatisCodeHelperNew2019.1-2023.1-3.4.1
【深度学习部署】基于Docker的BERT模型训练与API服务部署：实现代码复用与模型共享
摘 要 传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装火车票订票系统软件来发挥其高效地信息处理的作用，可以规范信息管理流程，让管理工作可以系统化和程序化，同时，火车票订票系统的有效运用可以帮助管理人员准确快速地处理信息。 火车票订票系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现火车票订票系统的功能。其中管理员管理用户，新闻公告。 火车票订票系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，火车票订票系统都可以轻松应对。 关键词：火车票订票系统；SpringBoot框架，系统分析，数据库设计
【ABB机器人】-00标准保养简介.pdf