Ext JS 学习(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

不早了，FormPanel还有很多的东西要了解，但是今天不能再讲了，太多了，大家都没有兴致看下去,明天继续。
extjs的东西很庞大，但是还没有一个人用中文系统的分析写文章，所以资料都很可贵，现在我想做这件事，请大家多多支持，我才有动力，