学习ExtJS form布局

作者: 乌鲁木齐花式揉道教练
来源: 51数据库
2021-07-08

一、 form布局由类ext.layout.formlayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。
hidelabels：tru表示隐藏标签，默认为false。
labelalign：标签队齐方式left、right、center,默认为left。

复制代码代码如下:

 
ext.onready(function(){ 
var _panel = new ext.panel({ 
title:"人员信息", 
renderto:ext.getbody(), 
frame:true, 
width:500, 
height:300, 
layout:"form", 
hidelabels:false, 
labelalign:"right", 
height:120, 
defaulttype: 'textfield', 
items:[ 
{fieldlabel:"姓名",name:"name"}, 
{fieldlabel:"请输入地址",name:"address"}, 
{fieldlabel:"请输入电话",name:"tel"} 
] 
} 
); 

二、在实际应用中，ext.form.formpanel这个类默认布局使用的是form布局，因此我们直接使用formpanel即可。上面的例子可改写成如下的形式：

复制代码代码如下:

 
ext.onready(function(){ 
var _panel = new ext.formpanel({ 
title:"人员信息", 
renderto:ext.getbody(), 
frame:true, 
width:500, 
height:300, 
hidelabels:false, 
labelalign:"right", 
height:120, 
defaulttype: 'textfield', 
items:[ 
{fieldlabel:"姓名",name:"name"}, 
{fieldlabel:"请输入地址",name:"address"}, 
{fieldlabel:"请输入电话",name:"tel"} 
] 
} 
); 