Ext.FormPanel(01)

最新推荐文章于 2019-08-13 01:55:07 发布

thtwinj2ee

最新推荐文章于 2019-08-13 01:55:07 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJS 文章标签： EXT

本文链接：https://blog.youkuaiyun.com/thtwinj2ee/article/details/83433185

ExtJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍ExtJS中FormPanel组件的基本用法及高级特性，包括字段布局、表单元素配置、按钮事件处理等，并通过实例展示如何创建个性化表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=x-large]看看强大的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题，创建的时候： //查看源代码便知，两种方法是一样的
Ext.form.FormPanel = Ext.FormPanel;我们还是从最简单的代码实例开始吧：

<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[/size]