学习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,
                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即可。上面的例子可改写成如下的形式：

Code

 Ext.onReady(function(){

        var _panel = new Ext.FormPanel({

                title:"人员信息",

                renderTo:Ext.getBody(),

                frame:true,

                500,

                height:300,

                hideLabels:false,

                labelAlign:"right",

                height:120,

                defaultType: 'textfield',

                items:[

                {fieldLabel:"姓名",name:"name"},

                {fieldLabel:"请输入地址",name:"address"},

                {fieldLabel:"请输入电话",name:"tel"}

                ]

                }

                );