Ext.FormPanel 学习示例

本文主要是介绍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的参数，这里列举另外两个：

.labelAlign:fieldlabel的排列位置，默认为 " left " ，其他两个枚举值是 " center " , " right " 
.labelWidth:fieldlabel的占位宽
.method: " get " 或 " post " 
.url： " 提交的地址 " 
 
.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  