Extjs面板和布局初探
面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种, 我自己总结了两句话, 先把它背起来,再慢慢研究这十种布局是怎么玩的."列表自折容, 卡表锚(描)边绝", 稍微胡说下, 供大家能更快记忆. 大家都知道html有列表, 那么列表把自己的容貌给折毁了,这叫"列表自折容", 有卡(信用卡,银行卡,随意啦), 有表(瑞士, OMEGA) 当然给自己描边(装饰自己),天下一绝啊,所以叫"卡表描边绝". 言归正传, 这十种布局方式分别为:
•ColumnLayout（列布局）, 在面板设置的对应代码：layout : 'column', 即layout配置项名称为：column
•FormLayout（表单布局）, 在面板设置的对应代码：layout : 'form', 即layout配置项名称为：form
•FitLayout（自适应布局）, 在面板设置的对应代码：layout : 'fit', 即layout配置项名称为：fit
•AccordionLayout（折叠布局）, 在面板设置的对应代码：layout : 'accordion', 即layout配置项名称为：accordion
•ContainerLayout（容器布局）
•CardLayout（卡片式布局）, 在面板设置的对应代码：layout : 'card', 即layout配置项名称为：card
•TableLayout（表格布局）, 在面板设置的对应代码：layout : 'table', 即layout配置项名称为：table
•AnchorLayout（锚点布局）, 在面板设置的对应代码：layout : 'anchor', 即layout配置项名称为：anchor
•BorderLayout（边框布局）, 在面板设置的对应代码：layout : 'border', 即layout配置项名称为：border
•AbsoluteLayout（绝对位置布局）, 在面板设置的对应代码：layout : 'absolute', 即layout配置项名称为：absolute
接下来分别介绍这10种布局类的特点及使用方式。
本文所用的html文本如下。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test Extjs Panel</title>
<script type="text/javascript" src="Ext-4-Lib/datagrid/include-ext.js"></script>
<script type="text/javascript" src="Ext-4-Lib/datagrid/options-toolbar.js"></script>
<script type="text/javascript" src="Ext-4-Lib/class/panel.js"></script>
</head>
<body>
<div id="panel">
</div>
</body>
</html>
Common Html
一: 列布局
列布局Ext.layout.ColumnLayout对应面板布局layout配置项的名称为column。这是一种多列风格的布局样式，每一列的宽度都可以根据百分比或固定值来进行设置，高度允许根据内容进行变化，它支持一个特殊的属性columnWidth，每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值，来确定列宽。width配置项是以像素为单位的固定宽度，必须是大于或等于1的数字。columnWidth配置项是以百分比为单位的相对宽度，必须是大于0小于1的小数，例如“.25”。注意：所有列的columnWidth值相加必须等于1。1. 指定固定列宽代码5-15中将创建包含两个子面板的列布局示例。
二: 表单布局
Ext.layout.FormLayout是为表单特殊设计的布局，用来管理表单字段的显示，通常情况下直接使用Ext.form.FormPanel表单面板，因为它已经内置了表单布局，并且提供了表单提交、读取等表单的功能。使用form布局的容器可以使用一些表单特有的配置项，它们包括：
•hideLabels: (Boolean)：是否隐藏字段标签，默认为false。
•itemCls: (String)：每个字段项和字段标签上的样式类，默认值为‘x-form-item’。•labelAlign: (String)：字段标签的对齐方式，默认为空表示左对齐。
•labelPad: (Number)：字段标签与字段直接的空白，默认为5，该项只在提供labelWidth配置项的情况下生效。
•labelWidth: (Number)：字段标签的宽度，默认为100。
任何组件都可以加入到表单布局的容器中，但是扩展自Ext.form.Field类的组件可以支持一些表单项的特殊属性，它们包括：
•clearCls: (String)：应用到专门的清除div上的样式，默认为‘x-form-clear-left’。•fieldLabel: (String)：字段标签上的文本，默认为‘’。
•hideLabel: (Boolean)：设置是否隐藏标签和分割符，默认为false。
•itemCls: (String)：应用到表单字段及标签上的样式类，默认为‘x-form-item’。•labelSeparator: (String)：字段标签和字段本身直接的分隔符，默认为‘:’。•labelStyle: (String)：应用到字段标签上的样式类。
Ext.onReady(function(){
// Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg';
Ext.QuickTips.init();
var panel = Ext.create('Ext.Panel', {
title: '登录',
// tbar : ['顶端工具栏(top toolbars)'],
// bbar : ['底端工具栏(bottom toolbars)'],
height : 400,
width : 600,
frame : true,
// applyTo : 'panel',
layout : 'form',
renderTo: 'panel',
layoutSeparator : ': ',
// autoLoad: 'testPaging.html',
collapsible : true,
closable : true,
bodyStyle : 'background-color:#FFFFAA',
defaultType : 'textfield',
defaults : {
msgTarget : 'side'
},
// html : '<div>面板体(body)</div>',
items : [
{
fieldLabel : '用户名',
allowBlank : false,
width : 250
},
{
fieldLabel : '密码',
allowBlank : false,
width : 250
}
],
tools : [//设置面板头部功能区
{
id : 'toggle',
tooltip: 'toggle'
},
{id : 'maximize'}
],
buttons : [
new Ext.Button({
text : '登录'
}),
new Ext.Button({
text : '取消'
})
]
});
panel.initResizable();
panel.initDraggable();
});
Extjs_form
三: 自适应布局
Ext.layout.FitLayout是布局的基础类，对应面板布局配置项（layout）的名称为fit，使用fit布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。
注意：在本节的示例之前会简单地介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建，并提供一般组件对应xtype类型的详细列表。读者要形成使用xtype的习惯，而减少new关键字的使用。
四: 折叠布局
Ext.layout.Accordion扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持。
Ext.onReady(function(){
// Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg';
Ext.QuickTips.init();
var panel = Ext.create('Ext.Panel', {
title: '登录',
height : 400,
width : 400,
frame : true,
layout : 'accordion',
renderTo: 'panel',
layoutSeparator : ': ',
collapsible : true,
closable : true,
bodyStyle : 'background-color:#FFFFAA',
layoutConfig : {
activeOnTop : true, // 打开的子面板置顶
fill : true, // 子面板充满父面板的剩余空间
hideCollapseTool : false, // 是否隐藏子面板的展开收缩按钮
titleCollapse : true, // 子面板标题
animate : true // 使用动画效果
},
items : [
{
title : '折叠面板一',
html : 'hello1'
},
{
title : '折叠面板二',
html : 'hello2'
},
{
title : '折叠面板三',
html : 'hello3'
}
],
buttons : [
new Ext.Button({
text : '登录'
}),
new Ext.Button({
text : '取消'
})
]
});
panel.initResizable();
panel.initDraggable();
});
Extjs_accordion
五: 容器布局
Ext.layout.ContainerLayout提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过new关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建。
六: 卡片布局
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为card。该布局会包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem，因为一次只能显示一个子面板，所以切换子面板的唯一途径就是调用setActiveItem方法，它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制，导航逻辑需要开发人员自己实现。
七: 表格布局
Ext.layout.TableLayout对应面板布局layout配置项的名称为table。这种比较允许你非常容易地渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。
注意：必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项。
八: 锚点布局
Ext.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局（layout）配置项的名称为anchor。如果容器大小发生变化，所有子面板的位置都会根据规则重新计算，并自动渲染。使用anchor布局需要注意配置项的使用。
anchorSize（父容器提供）。anchor布局提供了anchorSize配置项用来设置虚拟容器的大小，默认情况下anchor布局是根据容器自身的大小来进行计算定位的。如果提供了anchorSize属性则anchor布局就会根据该尺寸生成一个虚拟容器，然后根据这个虚拟容器的大小来进行计算定位。anchor（子容器提供）。加入到使用anchor布局面板中的子面板也都支持一个anchor配置项，
它是一个包含2个值的字符串，水平值和垂直值，例如：‘100% 50%’，这个值告知父容器应该怎样为加入到其中的子面板进行定位，有效值包括如下3类。
百分比（Percentage）：1~100之间的任意百分比，第1项数值表示子面板占父容器宽度的百分比，第2项数值表示子面板占父容器宽高的百分比，例如‘100% 50%’表示，子面板宽度为父容器的100%，而高度为父容器的1/2，如果只提供一个值（如：‘50%’）则只对子面板的宽度生效，高度保持默认值。
偏移值（Offsets）：任意整数，可以为正数也可以是负数，第1项数值表示子面板到父容器右边缘的偏移量，第2项数值表示子面板到父容器下边缘的偏移量，例如‘-50 -100’表示，子面板距父容器的右边缘偏移50像素，即子面板的宽度为父容器的宽度减去50像素；子面板距父容器的下边缘偏移100像素，即子面板高度为父容器的高度减去100像素。如果只提供一个值（如：‘-50’）则只对子面板的宽度生效，高度保持默认值。
参考边（Sides）：有效的值包括‘right’（或‘r’）和‘bottom’（或‘b’）。要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果，例如‘r b’，说明父容器会计算与子容器宽度和高度的差值，然后按父容器体（body）的实际宽度和高度减去这个差值，重新为子面板定位。
Ext.onReady(function(){
// Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg';
Ext.QuickTips.init();
var panel = Ext.create('Ext.Panel', {
title: '登录',
height : 400,
width : 400,
frame : true,
layout : 'anchor',
renderTo: 'panel',
layoutSeparator : ': ',
collapsible : true,
closable : true,
bodyStyle : 'background-color:#FFFFAA',
items : [
{
title : '锚点面板一',
html : 'hello1',
anchor : '30% 70%' // '-100 -200'
}//,
// {
// title : '锚点面板二',
// html : 'hello2',
// anchor : '30% 70%' // '-100 -200'
// },
// {
// title : '锚点面板三',
// html : 'hello3',
// anchor : '30% 70%' // '-100 -200'
// }
],
buttons : [
new Ext.Button({
text : '登录'
}),
new Ext.Button({
text : '取消'
})
]
});
panel.initResizable();
panel.initDraggable();
});
Extjs_anchor
九: 边框布局
Ext.layout.BorderLayout对应面板布局layout配置项的名称为
border。该布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是east、south、west、north、center。加入到容器中的子面板需要指定region配置项来告知容器要加入到哪个部分，并且该布局还内建了对面板分隔栏的支持。
十: 绝对位置布局
Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局，对应面板布局（layout）配置项的名称为absolute。它可以根据子面板中配置的x/y坐标进行定位，并且坐标值支持使用固定值和百分比两种形式。
草原战狼淘宝小店：http://xarxf.taobao.com/ 淘宝搜小矮人鞋坊，主营精致美丽时尚女鞋，为您的白雪公主挑一双哦。谢谢各位博友的支持。
=================================================================================================
======================== 以上分析仅代表个人观点，欢迎指正与交流 ===============
======================== 尊重劳动成果，转载请注明出处，万分感谢 ================
=================================================================================================
Extjs面板和布局初探的更多相关文章
- Extjs关于FormPanel布局
Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...
- 【ExtJS】简单布局应用
前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示 ...
- 学习 ExtJS 4 面板与布局
原文 http://www.cnblogs.com/codealone/archive/2013/06/04/3091325.html 面板Panel Ext.panel.Panel拓展自Ext.co ...
- java模仿qq好友面板的布局（BoxLayout问题）
.............. JLabel ll = new JLabel(dlg.getNameText() + ":" + dlg.getIPText(), ii[index] ...
- android 类似QQ底部输入框弹出键盘和面板冲突 布局闪动处理方案(转)
先看下效果 差不多就是解决这种冲突,布局闪动的 作者的githup :https://github.com/Jacksgong/JKeyboardPanelSwitch Android键盘面板冲突 布 ...
- 学习ExtJS的grid布局
这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- Android学习系列(5)--App布局初探之简单模型
人类科技的进步源自探索,探索来自于发现本原,当然App布局没这么先进,本文也只是一个归类总结.这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. Androi ...
- 【ExtJS】FormPanel 布局(二)
周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...
随机推荐
- 关于DELL服务器如果采购散件，进行服务器升级的相关说明
拿DELL服务器内存来说明这个情况,其他硬盘等等是 一样的: 1.DELL服务器的内存散件,从购买之日起,质保期是一年: 2.但是如果你把内存插到能兼容这个内存的服务器上去使用,请注意我的字眼,是能兼 ...
- 阿里云内网和公网NTP服务器和其他互联网基础服务时间同步服务器
阿里云为云服务器ECS提供了内网NTP服务器,对于阿里云以外的设备,阿里云同时提供了 公网NTP服务器,供互联网上的设备使用. 内网和公网NTP服务器 以下为阿里云提供的内网和公网NTP服务器列表. ...
- LightGBM优势总结
效率和内存上的提升 1) 在训练决策树计算切分点的增益时,xgboost采用预排序,即需要对每个样本的切分位置都要计算一遍,所以时间复杂度是O(#data). 而LightGBM则是将样本离散化为直方 ...
- 开发组件：Systemd
Systemd 入门教程:命令篇 http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html
- ES６
1属性的遍历:上个图
- windows 下，查看并杀死进程
今天启动我的play framework 服务 提示 could not bind on 9000.还是个error.这让我很不解,昨天还好好的. 怀疑是9000呗某个服务占了,在linux下还挺好办 ...
- WebRTC内置debug工具，详细参数解读 chrome://webrtc-internals/
为了确保这篇文章所写内容尽可能的准确,我决定请来Philipp Hancke来作为此篇文章的共同作者. 当你想要找到你WebRTC产品中的问题时,webrtc-internals是一个非常棒的工具,因 ...
- 第一模块第一章 review
---恢复内容开始--- 练习题: 1.简述编译型与解释型语言的区别,且分别列出你知道的那些属于编译型,哪些属于解释型 机器语言:由于计算机内部只能接受二进制代码,因此,用二进制代码0和1描述的指令称 ...
- 在eclipse的web项目里面创建jsp时第一行报错
原因是因为项目里面没有配置tomcat,配置一下tomcat就好了
- C++Primer笔记-----day08
==========================================================================day08===================== ...