学习ExtJS（十） form布局 _extjs form布局-优快云博客

本文介绍了Ext框架中的FormLayout及其配置选项，包括如何隐藏标签、设置标签对齐方式等，并展示了如何使用FormPanel来简化表单创建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

(请您对文章做出评价)