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

查看更多 下一篇