ExtJS学习笔记（2）-From的类型，Ext.FormPanel

今天我们要看看强大的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