当前位置>>
《ExtJS实用开发指南》印刷版3月10号推出，赶快去看看吧。
Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。看下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
});
上面的代码创建了一个面板，面板使用Form布局，面板中包含三个子元素，这些子元素都是文本框字段，在父容器中还通过hideLabels、labelAlign等配置属性来定义了是否隐藏标签、标签对齐方式等。上面代码的输出结果如下图所示：
可以在容器组件中把hideLabels设置为true，这样将不会显示容器中字段的标签了，如下图所示：
在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，而且FormPanel还会创建与 <form> 标签相关的组件，因此一般情况下我们直接使用FormPanel即可。上面的例子可改写成如下的形式：
Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo:"hello",
title:"容器组件",
width:300,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
});
程序结果与前面使用Ext.Panel并指定form布局的一样，如下图所示：
（版权声明：本人Blog上的所有文章版本均归EasyJF开源的冷雨所有，受法律保护，可以在互联网上进行转载，转载必须保留作者版权声明及链接；未经本人书面许可，不得把本人Blog上的文章用于出版、发行或其它商业用途。）
上一篇：Fit布局 下一篇：Accordion布局
