ExtJs表单示例（包含输入验证）
标签：
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单示例1</title>
<meta charset="UTF-8">
<title>Hello</title>
<link href="Extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Extjs/ext-all-debug.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
//Ext.Msg.alert('Hello窗口', 'hello');
Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget = 'under'; //提示的显示方式
var subriver = Ext.create('Ext.data.Store', {
fields: ['subrivername', 'name'],
data: [
{"subrivername": "r1", "name": "选项A"},
{"subrivername": "r2", "name": "选项B"},
{"subrivername": "r3", "name": "选项C"},
{"subrivername": "r4", "name": "选项D"}
]
});
var demoform = Ext.create('Ext.form.Panel', {
title: '示例表单',
bodyStyle: {//设置表单样式
background: '3232CD',
padding: '10px'
},
frame: true,//设置圆角边框
heigth: 600,
width: 800,
margin: 20,
layout: {type: 'auto', align: 'right'},
buttonAlign: 'center',
renderTo: 'myform',
url: 'cccc',
defaultType: 'textfield',
defaults: {
labelWidth: 100,
allowBlank: true,
msgTarget: 'side',
pageSize: 4
},
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
fieldLabel: '用户名',
name: 'username',
allowBlank: false,
regex: /[\u4e00-\u9fa5]/,
regexText: '用户名只能为中文'
},
{
xtype: 'textfield',
fieldLabel: '密码',
name: 'password',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: '邮箱',
name: 'email',
vtype: 'email'
}
]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'timefield',
fieldLabel: '时间',
name: 'thisTime'
}, {
xtype: 'datefield',
fieldLabel: '日期(年/月/日)',
format: 'Y-m-d',
name: 'thisDate'
}, {
xtype: "combobox",
fieldLabel: '下拉列表',
store: subriver,
queryMode: 'local',
displayField: 'name',
valueField: 'subrivername'
},
]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'numberfield',
fieldLabel: '幸运数字',
name: 'luckyNumber'
}, {
xtype: 'filefield',
fieldLabel: '上传文件',
name: 'upFile',
buttonText: '选择文件',
width: 300,
msgTarget: 'side'
}
]
},
{
xtype: 'fieldset',
title: '可折叠选项卡组',
collapsible: true, //可折叠
items: [{
xtype: 'checkboxgroup',
fieldLabel: '3列复选框',
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'a1', inputValue: '1'},
{boxLabel: 'Item 2', name: 'a2', inputValue: '2'},
{boxLabel: 'Item 3', name: 'a3', inputValue: '3'},
{boxLabel: 'Item 4', name: 'a4', inputValue: '4'},
{boxLabel: 'Item 5', name: 'a5', inputValue: '5'},
{boxLabel: 'Item 6', name: 'a6', inputValue: '6'}
]
},
{
xtype: 'radiogroup',
fieldLabel: '3列单选框',
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'r1', inputValue: '1'},
{boxLabel: 'Item 2', name: 'r2', inputValue: '2', checked: true},
{boxLabel: 'Item 3', name: 'r3', inputValue: '3'},
{boxLabel: 'Item 4', name: 'r4', inputValue: '4'},
{boxLabel: 'Item 5', name: 'r5', inputValue: '5'},
{boxLabel: 'Item 6', name: 'r6', inputValue: '6'}
]
}]
}, {
xtype: 'textarea',
fieldLabel: '描述',
name: 'describe'
}, {
xtype: 'htmleditor',
fieldLabel: '编辑器',
width: 550,
height: 220,
frame: true,
layout: 'fit',
enableColors: false,
enableAlignments: false,
autoFitErrors: true
},
{
xtype: 'button',
buttonAlign: "right",
text: '保存'
}
]
});
// 自定义数据模型
var jsonpModel = Ext.define("jsonpModel", {
extend: 'Ext.data.Model',
fields: [{
name: 'userid',
type: 'string'
}, {
name: 'username',
type: 'string'
}, {
name: 'dateline',
type: 'string'
}, {
name: 'title',
type: 'string'
}]
});
// 数据
var myStore = Ext.create("Ext.data.Store", {
model: 'jsonpModel',
pageSize: 10,//配置每页显示记录数
proxy: {
type: 'jsonp',
url: 'http://www.sencha.com/forum/topics-browse-remote.php',
reader: {
totalProperty: 'totalCount',
root: 'topics'
}
},
autoLoad: true
// 自动加载数据
});
// 表格
var myGrid = new Ext.grid.Panel({
title:'示例表格',
width:800,
margin:20,
renderTo:'mygrid',
columns: [{
xtype: 'rownumberer',
text: '行号'
}, {
text: '用户ID',
dataIndex: 'userid'
}, {
text: '用户姓名',
dataIndex: 'username'
}, {
text: '时间线',
dataIndex: 'dateline'
}, {
text: '标题',
dataIndex: 'title'
}],
store: myStore,
bbar: {// 在表格底部 配置分页
xtype: 'pagingtoolbar',
store: myStore,
displayInfo: true
}
});
// var mywin = Ext.create('Ext.window.Window', {
// title: '主窗口',
// height: 1000,
// width: 850,
// maximizable: true,
// minimizable: true,
// layout: {type: 'auto', align: 'right'},
// items: [demoform, myGrid]
// });
// mywin.show();
});
</script>
</head>
<body>
<!--
表单常用标签
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 类似事件的下拉框
-->
<!--
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
//放在onReady的function(){}中
Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚举值为: qtip-当鼠标移动到控件上面时显示提示;
title-在浏览器的标题显示，但是测试结果是和qtip一样的;
under-在控件的底下显示错误提示;
side-在控件右边显示一个错误图标，鼠标指向图标时显示错误提示. 默认值;
id-[element id]错误提示显示在指定id的HTML元件中
①用vtype格式进行简单的验证
items:[
{fieldLabel:"不能为空",
vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
id:"blanktest",
anchor:"90%" }
]
vtype的值可为:
1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是""
4.url//url格式验证，格式为http://www.baidu.com
②高级自定义密码验证 ，自己编写自定义验证函数
③使用正则表达式验证(推荐),网络有很多可以用的列子
-->
<!--
Window常用方法
一、属性
plain：布尔类型，true表示强制与背景色保持协调，默认值为false。
resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。
maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。
maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。
closable：布尔类型，true表示显示关闭按钮，默认值为true。
bodyStyle：与边框的间距，如：bodyStyle:"padding:3px"。
buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。
closeAction："close"释放窗体所占内存，"hide"隐藏窗体，建议使用"hide"。
二、方法
show：打开窗体。
hide：隐藏窗体。
close：关闭窗体。
三、事件
show：打开窗体时触法。
hide：隐藏窗体时触法。
close：关闭窗体时触法。
-->
</body>
<div id="myform" ></div>
<div id="mygrid"></div>
</html>点击查看更多内容
18人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦