EXT的Form 格局

EXT的Form 布局
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 布局的一样。