form组件详解下

来源：互联网发布：js 改变div属性编辑：程序博客网时间：2024/05/17 08:43

一、Ext.form.field.Hidden 隐藏字段，不展示，但是其值提交

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.create("Ext.form.Panel",{

title:"本地hidden实例",

id:"myform",

renderTo:"formDemo",

bodyPadding:"55 5 5",

height:100,

width:270,

frame:true,

defaults:{

labelSeparator:":",

labelWidth:70,

width:200,

allowBlank:true,

msgTarget:"side",//提示信息在右边

labelAlign:"left"

items:[{

xtype:"textfield",

name:"name",

fieldLabel:"name",

value:"mairco_zhang@163.com"

},{ //隐藏字段，不显示，但是也往后台提交。

xtype:"hiddenfield",

name:"age",

value:"1"

}],

buttons:[

{text:"提交",handler:function(){

alert(Ext.JSON.encode(this.up("form").getForm().getValues()));

}}

]

})

});

二、Ext.form.field.HtmlEditor HTML的编辑器

items:[{

xtype:"htmleditor",

name:"HTML",

height:320,

width:580,

fontFamilies:["宋体","黑体","楷体"],//设置字体的样式

defaultLinkValue:"http://baidu.com"//设置超链接的默认地址

}],

三、Ext.form.field.Display 展示字段，就是为了展示，其值不提交

items:[{

xtype:"displayfield",

name:"name",//做错误信息提示(非常有用)

fieldLabel:"name",

value:"mairco_zhang@163.com"

}]

四、Ext.form.Label 字段的标签，可以指定标签样式与位置可以做上下布局的标签+编辑区

items:[{

xtype:"label",

name:"name",

text:"name",

forId:"myname",

overCls:"a"

},{

xtype:"textfield",

name:"name",

hideLabel:true,

fieldLabel:"name",

value:"mairco_zhang@163.com",

inputId:"myname"

}],

五、Ext.form.FieldSet 字段集合，可以用items属性指定多个field包的组件可以做伸缩的组件

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.create("Ext.form.Panel",{

title:"本地fieldset实例",

id:"myform",

renderTo:"formDemo",

bodyPadding:"55 5 5",

height:300,

width:270,

frame:true,

defaults:{

labelSeparator:":",

labelWidth:70,

width:200,

allowBlank:true,

msgTarget:"side",//提示信息在右边

labelAlign:"left"

items:[{

title:"组合1",

xtype:"fieldset",

collapsible:true,//可以展示伸缩的按钮

defaultType:"textfield",

defaults:{

anchor:"95%"

layout:"anchor",//定义布局

items:[{

fieldLabel:"Name",

name:"name"

},{

fieldLabel:"Email",

name:"email"

}]

},{

title:"组合2",

xtype:"fieldset",

collapsible:true,//可以展示伸缩的按钮

defaultType:"textfield",

checkboxToggle:true,//使用多选框

collapsed:true,//是否默认是收起状态

defaults:{

anchor:"95%"

layout:"anchor",

items:[{

fieldLabel:"Name",

name:"name"

},{

fieldLabel:"Email",

name:"email"

}]

})

});

六、Ext.form.FieldContainer 可以做字段集合，指定布局，合并错误信息，合并label等。

items:[{

xtype:"fieldcontainer",

combineLabels:true,//合并label

combineErrors:true,//合并错误信息

layout:{

type:"hbox",//使用hbox布局，横排

align:"middle"//居中对其

fieldDefaults:{//字段的默认配置

hideLabel:true,//默认字段为隐藏label

allowBlank:false

defaultType:"textfield",

items:[{

xtype:'label',

forId:'name',

text:'姓名'

},{

fieldLabel:'name',//虽然被隐藏但是很有用(展示错误信息)

name: 'name',

inputId:'name'

},{

xtype:'label',

forId:'photo',

text:'电话'

},{xtype: 'displayfield', value: ' ('},{

name: 'photo',

fieldLabel: 'photo',

inputId:'photo'

},{xtype: 'displayfield', value: ' )'}]

}],

七、Ext.form.field.File 上传文件，由于没有后台，只能展示前台效果。submit提交后，可以在后台接受。

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.create("Ext.form.Panel",{

title:"本地fiel实例",

id:"myform",

renderTo:"formDemo",

bodyPadding:"55 5 5",

height:100,

width:270,

frame:true,

items:[{

xtype:"filefield",

name:"photo",

fieldLabel:"照片",

labelWidth:50,

anchor:"98%",

buttonText:"请选中文件"

}],

buttons:[

{text:"提交",handler:function(){

this.up("form").getForm().submit({

url:"",

waitMsg:"文件上传中",

success:function(){

Ext.Msg.alert("success","上传成功");

}

});

}}

]

})

});