ExtJS布局详解-优快云博客

Ext.onready()是用于在页面完成加载后显示内容，如果希望在加载过程中显示某些内容，那么必须在
<body>
    <div id="test">要显示Ext组件的块</div>
    <script type="text/javascript" src="包含Ext组件的代码"></script>
</body>
Ext.Panel是一个容器组件，显示为面板。相关属性如下
:
    var panel = new Ext.Panel({
        el: 'demo',        //用于指定显示的位置，作用与renderTo类似，但用这个属性必须在后面配置render()方法，而renderTo不需要
        title: '测试标题',    //标题
        floating: true,        //浮动
        shadow: true,        //阴影
        draggable: true,    //可拖动
        collapsible: true,    //可收缩
        html: '测试内容',    //面板内容
        pageX: 100,        //位置
        pageY: 50,
        width: 200,        //大小
        height: 150
    });

fireFox的调试工具firebug,
ie的调试工具debugbar 与companio.js

安装firebug
工具-->附加组件
f12 打开调试窗口或ctrl+f12 弹出调试窗口

开启调试功能，注意不要对所有的网站开启调试功能，这样会引起浏览器崩溃，因为有些网站采用了旧的ie特有写法，会导致firefox不停报错。
通过选择“控制台”，“脚本”，“网络”下按按钮中的站点来设定针对哪些站点开启调试功能。

布局
1.容器有哪些？
容器可以通过
layout指定布局管理器
items指定需要摆放的组件。

2.布局管理器有哪些

FitLayout可以自动根据容器大小填充，但其中items只能指定一个组件，不能指定多个，而且组件不能指定自动调整高度autoHeight:true。

BorderLayout
可以针对多个子组件进行布局，弥补了FitLayout的不足。可以针对上、下、左、右、中五个方位进行布局。其中center必须指定，其余可以省略。
上、下只能指定高度，左、右只能指定宽度，中间部分自动计算。
同样也要避免指定autoHeight:true，以免破坏了布局。

上、下、左、右可以指定split:true进行调整大小，同时指定minSize和maxSize对调整范围进行限制。

每个区域都可以通过设置title:标题,collapsible:true来实现显示内容的折叠。

AccordionLayout实现伸缩菜单的布局
设置layout:'accordion'后，要记得在items的每个元素里都要加上title参数，因为accordion是通过点击标题来伸缩显示。另外与布局相关的配置参数都写到layoutConfig:{
titleCollapse:true, 是否单击标题折叠子面板
animate:true, 展开和折叠是否使用动画效果
activeOnTop:展开和折叠时是否改变子面板顺序
}

CardLayout制作向导最合适。
CardLayout配置几个子面板，每次它只显示其中一个。

当前显示的子面板是由activeItem来控制的。

AnchorLayout
可以为items中的每个组件指定与总体布局大小的值
第一种方式使用百分比进行配置，设置一个子组件占整体长和宽的百分比。
layout:'anchor',
items:[{
...
anchor:"宽度百分比高度百分比"
},{
...

}];

第二种方式为设置右侧与底部的边距。

layout:'anchor',
items:[{
...
anchor:"-右侧的像素值 -底部的像素值"
},{
...

}];
以上两种方式可以同时使用。

AbsoluteLayout
是AnchorLayout的扩展，具备AnchorLayout所有特性，AnchorLayout布局下的子组件都是自上而下竖直排列的，我们不能控制每个组件的位置，AbsoluteLayout正是为解决这个问题而来的。
我们通过x,y参数达到控制子组件位置的效果。

FormLayout表单专用布局管理器
它也是AnchorLayout的扩展。
Ext.form.FormPanel使用它作为默认的布局方式。它提供了一素列的参数来控制显示效果。
FormLayout提供的用于控制表单显示的参数
hideLabels:是否隐藏field的标签
itemCls:表单显示的样式
labelAlign:标签的对齐方式（左，中，右）
labelPad:标签空白的像素值
labelWidth:标签宽度

Ext.form.Field对应的参数
clearCls:消除div渲染的css样式
fieldLabel:对应field的标签内容
hideLabel:是否隐藏标签
itemCls:field的css样式
labelSeparator:标签和field之间的分隔，默认是：
labelStyle: 标签的CSS样式

ColumnLayout布局

layout:'column',
items:[{
    title:'column 1',
    columnWidth: .3
},{
    title:'column 2',
    columnWidth: .7
}]
注意columnWidth参数，它是0-1之间的一个小数，表示组件在整体中所占的百分比，它们的总和应该是1.
如果希望某列的宽度固定，则可以直接用width:像素指定。而其余的列会进行宽度的自动配置。

Ext.Container是所有可布局组件的超类，只要是继承了Ext.Contrainer的子类就可以对自身进行布局。最常用的也是最主要的参数layout和items，它们分别用来设置使用的布局方式和包含的子组件。只要是进行布局，就必然会用到这两个参数，与这两个参数对应的还有另外两个参数，它们在需要进行特殊配置时非常有用：layoutConfig用于完成特殊配置，activeItem表示当前显示哪一个子组件，这在AccordionLayout和CardLayout等每次只能显示一个子组件的布局方式中非常有用。
重点提及的一个参数是defaultType，它用来设置子组件默认使用的xtype的值。默认情况下是defaultType:'panel'也就是items中创建的每个子组件都是Ext.Panel的实例。

可以使用Viewport对整个页面进行布局，但是每个页面只能有一个Viewport的限制。

ExtJs总结(二)