EXTJS 4 - htmleditor markInvalid 问题
EXTJS 4 - htmleditor markInvalid issue
我在表单中使用 htmleditor 字段,我想在该字段上使用 markInvalid 时看到红色矩形,但它似乎不起作用。
这里是代码示例:
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function() {
// Working fine, as expected
var nameField = formPanel.getForm().findField('name');
nameField.markInvalid('Name invalid message');
// Not working
// (but the docs specify markInvalid should works)
var nameField2 = formPanel.getForm().findField('name2');
nameField2.markInvalid('Name invalid message');
// Not working either
//var nameField3 = Ext.getCmp('nameId2');
//nameField3.markInvalid('Name invalid message');
}
}]
});
当您点击按钮时,只有文本框显示为红色。
HTMLeditor 没有显示为红色。
我是不是漏掉了什么?
这 markInvalid
function is empty for htmleditor
in it's source file
这就是为什么不起作用。
您需要先覆盖此 htmleditor
并创建 markInvalid
,如下所示。
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function(errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
在 this Fiddle 中,我使用 HtmlEditor
创建了一个演示。
代码片段:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function (errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
height:500,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function (button) {
var form = button.up('form').getForm();
form.findField('name').markInvalid('Name invalid message');
form.findField('name2').markInvalid('Html editor invalid message');
}
}]
});
}
});
CSS
<style>
.x-form-invalid .x-html-editor-wrap {
background-color: white;
background-image: url(//cdn.sencha.com/ext/gpl/4.1.1/resources/themes/images/default/grid/invalid_line.gif);
background-repeat: repeat-x;
background-position: center bottom;
border-color: rgb(204, 51, 0);
}
</style>
我在表单中使用 htmleditor 字段,我想在该字段上使用 markInvalid 时看到红色矩形,但它似乎不起作用。
这里是代码示例:
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function() {
// Working fine, as expected
var nameField = formPanel.getForm().findField('name');
nameField.markInvalid('Name invalid message');
// Not working
// (but the docs specify markInvalid should works)
var nameField2 = formPanel.getForm().findField('name2');
nameField2.markInvalid('Name invalid message');
// Not working either
//var nameField3 = Ext.getCmp('nameId2');
//nameField3.markInvalid('Name invalid message');
}
}]
});
当您点击按钮时,只有文本框显示为红色。 HTMLeditor 没有显示为红色。
我是不是漏掉了什么?
这 markInvalid
function is empty for htmleditor
in it's source file
这就是为什么不起作用。
您需要先覆盖此 htmleditor
并创建 markInvalid
,如下所示。
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function(errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
在 this Fiddle 中,我使用 HtmlEditor
创建了一个演示。
代码片段:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function (errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
height:500,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function (button) {
var form = button.up('form').getForm();
form.findField('name').markInvalid('Name invalid message');
form.findField('name2').markInvalid('Html editor invalid message');
}
}]
});
}
});
CSS
<style>
.x-form-invalid .x-html-editor-wrap {
background-color: white;
background-image: url(//cdn.sencha.com/ext/gpl/4.1.1/resources/themes/images/default/grid/invalid_line.gif);
background-repeat: repeat-x;
background-position: center bottom;
border-color: rgb(204, 51, 0);
}
</style>