在表单中，有些字段是必填的，如果用户没有填写，就需给出相应的提示或标识。在ExtJS4中，可以通过样式或属性方式为必填项添加红色标识。
1. 样式方式
在表单组件中，可以使用cls属性为必填项添加样式类。通过设置样式类，可以为必填项添加红色边框或背景色等标识，提高用户注意。
例如：
```
items: [{
xtype: 'textfield',
fieldLabel: '姓名',
name: 'name',
cls: 'required-field'
}]
```
在CSS中定义样式：
```
.required-field {
border: 1px solid red;
}
```
这样，在表单中添加字段时，给必填项设置样式类“required-field”，就可以为其添加红色边框。
2. 属性方式
在表单组件中，还可以使用allowBlank属性控制表单项是否必填。可以将allowBlank属性设置为false，表示该项必须填写，否则将出现错误提示。在该项的label标签中可以使用starChar属性为其添加星标标识。
例如：
```
items: [{
xtype: 'textfield',
fieldLabel: '姓名',
name: 'name',
allowBlank: false,
labelSeparator: '',
labelWidth: 50,
starChar: '*'
}]
```
在表单中，如果该项未填写，将出现错误提示；同时，该项前面会有一个红色星标标识。
3. 案例说明
假设我们要创建一个包含必填项的表单，其字段包括“姓名”、“年龄”、“性别”和“爱好”。其中，“姓名”和“年龄”为必填项。
使用样式方式为必填项添加红色边框：
```
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
title: '表单',
renderTo: Ext.getBody(),
margin: 10,
items: [{
xtype: 'textfield',
fieldLabel: '姓名',
name: 'name',
allowBlank: false,
cls: 'required-field'
},{
xtype: 'numberfield',
fieldLabel: '年龄',
name: 'age',
allowBlank: false,
cls: 'required-field'
},{
xtype: 'radiogroup',
fieldLabel: '性别',
columns: 2,
items: [{
boxLabel: '男',
name: 'sex',
inputValue: 'male'
}, {
boxLabel: '女',
name: 'sex',
inputValue: 'female'
}]
},{
xtype: 'checkboxgroup',
fieldLabel: '爱好',
columns: 2,
items: [{
boxLabel: '音乐',
name: 'hobby',
inputValue: 'music'
}, {
boxLabel: '电影',
name: 'hobby',
inputValue: 'movie'
}, {
boxLabel: '阅读',
name: 'hobby',
inputValue: 'reading'
}]
}]
});
});
```
在CSS中定义样式：
```
.required-field {
border: 1px solid red;
}
```
使用属性方式为必填项添加标识：
```
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
title: '表单',
renderTo: Ext.getBody(),
margin: 10,
items: [{
xtype: 'textfield',
fieldLabel: '姓名',
name: 'name',
allowBlank: false,
labelSeparator: '',
labelWidth: 50,
starChar: '*'
},{
xtype: 'numberfield',
fieldLabel: '年龄',
name: 'age',
allowBlank: false,
labelSeparator: '',
labelWidth: 50,
starChar: '*'
},{
xtype: 'radiogroup',
fieldLabel: '性别',
columns: 2,
items: [{
boxLabel: '男',
name: 'sex',
inputValue: 'male'
}, {
boxLabel: '女',
name: 'sex',
inputValue: 'female'
}]
},{
xtype: 'checkboxgroup',
fieldLabel: '爱好',
columns: 2,
items: [{
boxLabel: '音乐',
name: 'hobby',
inputValue: 'music'
}, {
boxLabel: '电影',
name: 'hobby',
inputValue: 'movie'
}, {
boxLabel: '阅读',
name: 'hobby',
inputValue: 'reading'
}]
}]
});
});
```
效果如下：
样式方式：
属性方式：
通过上述代码，我们可以看到两种方式都能对必填项进行标识，但是适用场景不同。若想要添加其他的错误提示，可以使用属性方式，在表单顶部的位置放置错误提示。
壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。
我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！
发表评论 取消回复