//查看源代码便知,两种方法是一样的

Ext.form.FormPanel = Ext.FormPanel;

 

一个简单的实例:

<!--html代码-->

<body>

   <div id="form1"></div>

</body>

//js代码

var form1 = new Ext.form.FormPanel({

      width:350,

      frame:true,//圆角和浅蓝色背景

      renderTo:"form1",//呈现

      title:"FormPanel",

      bodyStyle:"padding:5px 5px 0",

      items:[

          {

            fieldLabel:"UserName",//文本框标题

            xtype:"textfield",//表单文本框

            name:"user",

            id:"user",

            width:200

          },

          {

            fieldLabel:"PassWord",

            xtype:"textfield",

            name:"pass",

            id:"pass",

            width:200

          }

      ],

      buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}]

    });

 

关于inputType,参数如下:

//input的各种类型(这个大家都知道,就只列了几个典型的)

radio

check

text(默认)

file

password等等

 

关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:

1.labelAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"

2.labelWidth:fieldlabel的占位宽

3.method:"get""post"

4.url"提交的地址"

 

5.submit:提交函数 //稍后我们一起详细分析

 

1.FormPanelfieldset应用

//把前面代码重写items属性

items:[

          {

            xtype:'fieldset',

            title: '个人信息',

            collapsible: true,

            autoHeight:true,

            width:330,

            defaults: {width: 150},

            defaultType: 'textfield',

            items :[{

                    fieldLabel: '爱好',

                    name: 'hobby',

                    value: 'www.cnblogs.com'

                },{

                    xtype:"combo",

                    name: 'sex',

                    store:["","","保密"],//数据源为一数组

                    fieldLabel:"性别",

                    emptyText:'请选择性别.'

                }]

            }

      ]

这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内容中详细探讨。
2.关于xtype的类型,在extjsform表单(其他的请参考api)中已经定义的有:

Form components

---------------------------------------

form            Ext.FormPanel

checkbox        Ext.form.Checkbox

combo            Ext.form.ComboBox

datefield        Ext.form.DateField

field            Ext.form.Field

fieldset        Ext.form.FieldSet

hidden          Ext.form.Hidden

htmleditor      Ext.form.HtmlEditor

label            Ext.form.Label

numberfield      Ext.form.NumberField

radio            Ext.form.Radio

textarea        Ext.form.TextArea

textfield        Ext.form.TextField

timefield        Ext.form.TimeField

trigger          Ext.form.TriggerField