ExtJS(4)--Ext.FormPanel

首先弄清楚这个问题，创建的时候：

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

Ext.form.FormPanel = Ext.FormPanel;

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

简单应用例子

Ext.onReady(function () {
  var form1 = new Ext.form.FormPanel({
    width:350,
    frame:true,//圆角和浅蓝色背景
    renderTo:"form1",
    title:"this is 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:"ok"},{text:"concel"}]
  });
});

关于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应用

Ext.onReady(function () {
  var form1 = new Ext.form.FormPanel({
    width:350,
    frame:true,//圆角和浅蓝色背景
    renderTo:"form1",
    title:"this is formPanel",
    bodyStyle:"padding:5px 5px 0",
    
    items:[{
      xtype:"fieldset",
      title:"个人信息",
      collapsible:true,
      autoHeight:true,
      width:330,
      defaults:{width:150},
      defaultType:"textfield",
      items:[{
        fieldLabel:"爱好",
        name:"haby",
        value:"hoho"
      },{
        xtype:"combo",
        name:"sex",
        store:["男","女","保密"],
        fieldLabel:"性别",
        emptyText:"请选择性别"
      }]
      
      },{
      fieldLabel:"PassWord",//表单文本款前面的字
      xtype:"textfield",//表单文本框
      name:"pass",
      id:"pass",
      width:200
    }],
    buttons:[{text:"ok"},{text:"concel"}]
  });
  

 

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