上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题,创建的时候:
都是通过items属性参数把表单元素添加到这个表单中。
我们发现两个文本框的类型和狂度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:
1.FormPanel的fieldset应用
这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内容中详细探讨。
2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:
首先弄清楚这个问题,创建的时候:
//
查看源代码便知,两种方法是一样的
Ext.form.FormPanel = Ext.FormPanel;
我们还是从最简单的代码实例开始吧:
Ext.form.FormPanel = Ext.FormPanel;
<!--
html代码
-->
< body >
< div id ="form1" ></ div >
</ body >
< 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( " 事件! " );}}]
});
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,参数如下:
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();}}]
});
//
input的各种类型(这个大家都知道,就只列了几个典型的)
radio
check
text(默认)
file
password等等
关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:
radio
check
text(默认)
file
password等等
1
.labelAlign:fieldlabel的排列位置,默认为
"
left
"
,其他两个枚举值是
"
center
"
,
"
right
"
2 .labelWidth:fieldlabel的占位宽
3 .method: " get " 或 " post "
4 .url: " 提交的地址 "
5 .submit:提交函数 // 稍后我们一起详细分析
因为内容太多,我们先看一个例子。
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: ' 请选择性别. '
}]
}
]
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
---------------------------------------
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