ExtJS(4)--Ext.FormPanel

来源：互联网发布：高等电网络理论编辑：程序博客网时间：2024/05/22 01:47

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

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

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"}]  });