首页  »   Web前端

EXT的Form 格局

网友分享于:2013-03-26  浏览:4次
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 布局的一样。

相关解决方案

最新解决方案