学习ExtJS form布局

222 阅读 0 评论 147 点赞

我是靠谱客的博主酷酷小刺猬，最近开发中收集的这篇文章主要介绍学习ExtJS form布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、 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"} 
] 
} 
); 