Ext.js - 表单
在大多数 Web 应用程序中，表单是从用户那里获取信息的最重要的小部件，例如登录表单/反馈表单，以便将值保存在数据库中以供将来参考。表单小部件就是用于此目的。
在创建表单之前，我们应该了解 xTypes。
xType 定义 Ext JS UI 组件的类型，该类型在组件渲染期间确定。例如，元素可以是文本框，其中 xType 为 textField，或者元素只能具有数字值，其中我们有 Numeric xType。
不同类型的 xType
TEXTFIELD
此 xType 表示文本字段，用户可以在其中输入值。文本字段的 Ext JS 类是"Ext.Form.Field.Text"。
{
xtype: 'textfield',
fieldLabel: 'Text field'
}
文本区域
这表示一个文本区域。Ext JS 类为"Ext.form.field.TextArea"。
{
xtype: 'textarea',
fieldLabel: 'Text Area'
}
显示字段
这表示显示文本字段。此字段的 Ext JS 类为"Ext.form.Label"。
{
xtype: 'displayfield',
fieldLabel: 'Display Field''
}
日期字段
这表示一个日期字段，该字段具有日期选择器来选择日期。Ext JS 类为"Ext.form.field.Date"。
{
xtype: 'datefield',
fieldLabel: 'Date picker'
}
按钮
这表示一个按钮。Ext JS 类为"Ext.button.Button"。
{
xtype: 'button',
text : 'Button'
}
单选框
这表示单选框，我们可以从所有单选按钮中选择任意一个，也可以自定义一次选择多个。Ext JS 类为"Ext.form.field.Radio"。
{
xtype : 'fieldcontainer',
fieldLabel : 'Radio field',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [{
boxLabel : 'A',
inputValue: 'a',
id : 'radio1'
},{
boxLabel : 'B',
inputValue: 'b',
id : 'radio2'
},{
boxLabel : 'C',
inputValue: 'c',
id : 'radio3'
}]
}
复选框字段
这表示一个复选框字段，我们可以一次选择多个值。Ext JS 类为"Ext.form.field.Checkbox"。
{
xtype: 'fieldcontainer',
fieldLabel: 'Check Box Field',
defaultType: 'checkboxfield',
items: [{
boxLabel : 'HTML',
inputValue: 'html',
id : 'checkbox1'
},{
boxLabel : 'CSS',
inputValue: 'css',
checked : true,
id : 'checkbox2'
},{
boxLabel : 'JavaScript',
inputValue: 'js',
id : 'checkbox3'
}]
}
组合框
这表示组合框。组合框包含项目列表。Ext JS 类为"Ext.form.field.ComboBox"。
{
xtype : 'combobox',
fieldLabel: 'Combo box',
store: store,
valueField: 'name'
}
// 存储下拉值
var store = Ext.create('Ext.data.Store', {
id : 'statesid',
fields: ['abbr', 'name'],
data : [
{"abbr":"HTML", "name":"HTML"},
{"abbr":"CSS", "name":"CSS"},
{"abbr":"JS", "name":"JavaScript"}
]
});
时间字段
这表示一个时间字段，其中可以预定义最大和最小时间值。Ext JS 类为"Ext.form.field.Time"。
{
xtype: 'timefield',
fieldLabel: 'Time field',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
}
文件字段
这表示我们可以浏览和上传文件的文件上传字段。Ext JS 类为"Ext.form.field.File"。
{
xtype: 'filefield',
fieldLabel: 'File field',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select File...'
}
SPINNER
这表示一个微调框字段，其中可以旋转和添加列表。Ext JS 类为"Ext.form.field.Spinner"。
{
xtype: 'spinnerfield',
fieldLabel: 'Spinner field'
}
数字字段
这表示一个数字字段，我们可以在其中预定义最大值和最小值。Ext JS 类为"Ext.form.field.Number"。
{
xtype: 'numberfield',
anchor: '100%',
fieldLabel: 'Numeric field',
maxValue: 99,
minValue: 0
}
隐藏字段
顾名思义，此 xtype 用于隐藏值。
{
xtype: 'hiddenfield',
value: 'value from hidden field'
}
表单面板的语法
以下是创建表单的简单语法。
Ext.create('Ext.form.Panel');
示例
以下是一个简单的示例，显示了包含所有 xTypes 的表单。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript">
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
id: 'newForm',
renderTo: 'formId',
border: true,
width: 600,
items: [{
xtype: 'textfield',
fieldLabel: 'Text Field'
},{
xtype: 'displayfield',
fieldLabel: 'Display Field'
},{
xtype: 'textarea',
fieldLabel: 'Text Area'
},{
xtype: 'datefield',
fieldLabel: 'Date picker'
},{
xtype: 'button',
text: 'Button'
},{
xtype: 'fieldcontainer',
fieldLabel: 'Radio field',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [{
boxLabel: 'A',
inputValue: 'a',
id: 'radio1'
},{
boxLabel: 'B',
inputValue: 'b',
id: 'radio2'
},{
boxLabel: 'C',
inputValue: 'c',
id: 'radio3'
}]
},{
xtype: 'fieldcontainer',
fieldLabel: 'Check Box Field',
defaultType: 'checkboxfield',
items: [{
boxLabel: 'HTML',
inputValue: 'html',
id: 'checkbox1'
},{
boxLabel: 'CSS',
inputValue: 'css',
checked: true,
id: 'checkbox2'
},{
boxLabel: 'JavaScript',
inputValue: 'js',
id: 'checkbox3'
}]
},{
xtype: 'hiddenfield',
name: 'hidden field ',
value: 'value from hidden field'
},{
xtype: 'numberfield',
anchor: '100%',
fieldLabel: 'Numeric Field',
maxValue: 99,
minValue: 0
},{
xtype: 'spinnerfield',
fieldLabel: 'Spinner Field',
step: 6,
// 覆盖 onSpinUp(无需使用步骤)
onSpinUp: function() {
var me = this;
if (!me.readOnly) {
var val = me.step; // 将默认值设置为步长值
if(me.getValue() !== '') {
val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
}
me.setValue((val + me.step) + ' Pack');
}
},
// override onSpinDown
onSpinDown: function() {
var me = this;
if (!me.readOnly) {
if(me.getValue() !== '') {
val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
}
me.setValue((val - me.step) + ' Pack');
}
}
},{
xtype: 'timefield',
fieldLabel: 'Time field',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
},{
xtype: 'combobox',
fieldLabel: 'Combo Box',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'HTML',
'name': 'HTML'
},{
'abbr': 'CSS',
'name': 'CSS'
},{
'abbr': 'JS',
'name': 'JavaScript'
}]
}),
valueField: 'abbr',
displayField: 'name'
},{
xtype: 'filefield',
fieldLabel: 'File field',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select File...'
}]
});
});
</script>
</head>
<body>
<div id = "formId"></div>
</body>
</html>
上述程序将产生以下结果 −
extjs_components.html
