Extjs的主要配置内容:
![211017565573714.jpg](https://i-blog.csdnimg.cn/blog_migrate/fb52b055a4d34ed3431cb70272612645.jpeg)
![211017581976413.jpg](https://i-blog.csdnimg.cn/blog_migrate/720dc607bcbee858991440c86b64c747.jpeg)
示例代码:
Ext.onReady(function(){
Ext.QuickTips.init();
var loginForm = new Ext.form.Panel({
title:'Ext.form.field.Text示例',
bodyStyle:'padding:5 5 5 5',//设置边距
frame:true,
height:120,
width:200,
renderTo:'form',
defaultType:'textfield',//设置表单字段的默认类型
defaults:{
labelSeparator:':',//分隔符
labelWidth:50,
width:150,
allowBlank:false,
labelAlign:'left',
msgTarget:'side'
},
items:[{
fieldLabel:'用户名',
name:'userName',
selectOnFocus:true,//得到焦点是自动选择文本;
//验证电子邮件格式的正则表达式
regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:'格式错误',
blankText:'请输入内容'
},{
name:'password',
fieldLabel:'密码',
inputType:'password'
}],
buttons:[{
text:'登录',
handler:function(){
loginForm.form.setValues({
userName:'user@com',
password:'123456'
});
}
}]
});
})
显示效果
![211017586047355.png](https://i-blog.csdnimg.cn/blog_migrate/e69b9274f71533fdc3b57df4cc6738fe.png)