ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

  上篇中我们讨论了Ext.window的简单使用，今天我们要看看强大的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题，创建的时候： 

// 查看源代码便知，两种方法是一样的
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( " 事件！ " );}}]
    });

都是通过items属性参数把表单元素添加到这个表单中。
我们发现两个文本框的类型和狂度是一样的，我们还可以把items里面的相同项提取出来，以简化代码：

// 简化代码，和上面的代码效果一样
var  form1  =   new  Ext.form.FormPanel({
       width: 350 ,
       frame: true ,
       renderTo: " form1 " ,
       title: " FormPanel " ,
       bodyStyle: " padding:5px 5px 0 " ,
       defaults:{width: 200 ,xtype: " textfield " },//*****简化****//
       items:[
          {
            fieldLabel: " UserName " ,
             // xtype:"textfield",
            name: " user " ,
            id: " user " ,
             // width:200
          },
          {
            fieldLabel: " PassWord " ,
             // xtype:"textfield",
            name: " pass " ,
            id: " pass " ,
            inputType: " password " ,
             // 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.FormPanel的fieldset应用

// 把前面代码重写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的类型，在extjs的form表单（其他的请参考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