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文本如下。

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/ 淘宝搜小矮人鞋坊，主营精致美丽时尚女鞋，为您的白雪公主挑一双哦。谢谢各位博友的支持。

=================================================================================================

======================== 以上分析仅代表个人观点，欢迎指正与交流 ===============

======================== 尊重劳动成果，转载请注明出处，万分感谢 ================

=================================================================================================