ExtJS4为form表单必填项添加红色，标识

在ExtJS4中，可以通过设置表单字段的属性来为必填项添加红色标识。具体实现方法有以下几种：

1. 设置表单字段的labelStyle属性为红色

使用labelStyle属性可以设置表单字段的标签样式，如字体大小、颜色等。在必填项上加上红色标识可以通过设置labelStyle属性为“color: red”的方式实现，示例代码如下：

```

items: [{

xtype: 'textfield',

fieldLabel: '姓名',

labelStyle: 'color: red',

allowBlank: false // 必填项

}, {

xtype: 'textfield',

fieldLabel: '邮箱',

allowBlank: false // 必填项

}]

```

2. 使用Ext.form.field.Base类的labelSeparator和labelClsExtra属性

使用Ext.form.field.Base类的labelSeparator和labelClsExtra属性可以设置表单字段的标签分隔符和额外标签样式。在必填项上加上红色标识可以通过设置labelSeparator为“*”和labelClsExtra为“required”来实现，示例代码如下：

```

items: [{

xtype: 'textfield',

fieldLabel: '姓名',

labelSeparator: '*',

labelClsExtra: 'required',

allowBlank: false // 必填项

}, {

xtype: 'textfield',

fieldLabel: '邮箱',

labelSeparator: '*',

labelClsExtra: 'required',

allowBlank: false // 必填项

}]

```

3. 使用自定义模板

使用自定义模板可以更详细且灵活地控制表单字段的渲染。可以通过在模板中添加必填项的标识来实现。示例代码如下：

```

items: [{

xtype: 'textfield',

fieldLabel: '姓名',

labelTpl: new Ext.XTemplate(

'',

'{fieldLabel}*',

''

),

allowBlank: false // 必填项

}, {

xtype: 'textfield',

fieldLabel: '邮箱',

labelTpl: new Ext.XTemplate(

'',

'{fieldLabel}*',

''

),

allowBlank: false // 必填项

}]

```

通过以上三种方法，都可以为表单的必填项添加红色标识。其中方法二和方法三可使表单标签样式更丰富，应用灵活度更高。

以下是完整的示例代码，包括所有三种方法的实现：

```

Ext.define('MyForm', {

extend: 'Ext.form.Panel',

xtype: 'myform',

items: [{

xtype: 'textfield',

fieldLabel: '姓名',

labelStyle: 'color: red',

allowBlank: false // 必填项

}, {

xtype: 'textfield',

fieldLabel: '邮箱',

labelSeparator: '*',

labelClsExtra: 'required',

allowBlank: false // 必填项

}, {

xtype: 'textfield',

fieldLabel: '电话',

labelTpl: new Ext.XTemplate(

'',

'{fieldLabel}*',

''

),

allowBlank: false // 必填项

}]

});

```

最后附上效果图：

 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/