EXTJS4自学手册——页面控件（表单控件）
一、Ext.form.Panel
说明：Form fields包括：hiddenfield，displayfield，textfield，textareafield，filefield，timefield，datefield，combobox，numberfield，checkboxfield，radiofield，multislider，sliderfield
例子：
<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
renderTo: 'myForm',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
//隐藏的文本框
xtype: 'hiddenfield', //1
name: 'hiddenfield1',
value: '隐藏的文本框'
},{
//显示文本框，相当于label
xtype: 'displayfield', //2
name: 'displayfield1',
fieldLabel: 'Display field',
value: '显示文本框'
},{
//输入文本框
xtype: 'textfield', //3
name: 'textfield1',
fieldLabel: 'Text field',
value: '输入文本框'
},{
//输入密码的文本框，输入的字符都会展现为.
xtype: 'textfield', //4
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
},{
//多行文本输入框
xtype: 'textareafield', //5
name: 'textarea1',
fieldLabel: 'TextArea',
value: '啦啦啦，我是卖报的小行家'
},{
//上传文件文本框
xtype: 'filefield', //6
name: 'file1',
fieldLabel: 'File upload'
},{
//时间文本框
xtype: 'timefield', //7
name: 'time1',
fieldLabel: 'Time Field',
minValue: '8:00 AM',
maxValue: '5:00 PM',
increment: 30
},{
//日期文本框
xtype: 'datefield', //8
name: 'date1',
fieldLabel: 'Date Field',
value: new Date()
},{
//下拉列表框
xtype: 'combobox', //9
fieldLabel: 'Combobox',
displayField: 'name',
store: Ext.create('Ext.data.Store', {
fields: [
{type: 'string', name: 'name'}
],
data: [
{"name":"Alabama"},
{"name":"Alaska"},
{"name":"Arizona"},
{"name":"Arkansas"},
{"name":"California"}
]
}),
queryMode: 'local',
typeAhead: true
},{
//只能输入数字的文本框
xtype: 'numberfield',
name: 'numberfield1', //10
fieldLabel: 'Number field',
value: 20,
minValue: 0,
maxValue: 50
},{
//复选框
xtype: 'checkboxfield', //11
name: 'checkbox1',
fieldLabel: 'Checkbox',
boxLabel: '复选框'
},{
//单选框，注意name和下面的单选框相同
xtype: 'radiofield', //12
name: 'radio1',
value: 'radiovalue1',
fieldLabel: 'Radio buttons',
boxLabel: 'radio 1'
},{
//单选框，注意name和上面的单选框相同
xtype: 'radiofield', //13
name: 'radio1',
value: 'radiovalue2',
fieldLabel: '',
labelSeparator: '',
hideEmptyLabel: false,
boxLabel: 'radio 2'
},{
//拖动组件
xtype: 'multislider', //14
fieldLabel: 'Multi Slider',
values: [25, 50, 75],
increment: 5,
minValue: 0,
maxValue: 100
},{
//拖动组件
xtype: 'sliderfield', //15
fieldLabel: 'Single Slider',
value: 50,
increment: 10,
minValue: 0,
maxValue: 100
}]
});
});
</script>
执行结果：
二、数据验证
例子：
<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields Validation',
width: 340,
bodyPadding: 5,
renderTo: 'myForm',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
//错误提示显示在下方，还可以配置为side、title、none
msgTarget: 'under'
},
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '必须输入',
//不允许为空验证
allowBlank: false //1
},{
xtype: 'textfield',
name: 'textfield2',
fieldLabel: '知道两个字符',
//输入的字符长度验证（至少输入2个字符）
minLength: 2 //2
},{
xtype: 'textfield',
name: 'textfield3',
fieldLabel: '最长5个字符',
//输入的字符长度验证（最多输入2个字符）
maxLength: 5 //3
},{
xtype: 'textfield',
name: 'textfield7',
fieldLabel: '正则表达式验证电话号码',
//通过正则表达式验证
regex: /^\d{3}-\d{3}-\d{4}$/, //4
regexText: 'Must be in the format xxx-xxx-xxxx'
},{
xtype: 'textfield',
name: 'textfield4',
fieldLabel: '验证用户输入的是否为email',
//已经定义好的验证，请通过文档查看vtype
vtype: 'email' //5
},{
xtype: 'textfield',
name: 'textfield6',
fieldLabel: '验证用户输入的是否是URL',
vtype: 'url' //8
}]
});
});
</script>
执行结果：
三、动态加载数据
说明：通过load方法加载json数据
四、提交数据
说明：通过submit方法提交数据