extjs 表单设置html5,ExtJs表单示例（包含输入验证）

表单示例1Hello

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();

});