Question

我们的验证边界在我们的应用程序中不再起作用（它之前正在工作）。不幸的是，这个bug在小提琴中是不可重复的，但是我试图尽可能深入地挖掘extJS代码。

我们有一个方法可以显示组件的验证边界。传入名称和类型，并检索GUI组件。这部分总是有效的

showValidationBorder: function (name, type) { //'myField' 'textfield'
    var _this = this;
    var cmp = this.queryGuiComponent(type, name); //got a cmp!!
    cmp.markInvalid('My Invalid Message!!!'); //:(
},

现在我们在组件上调用 markInvalid 。 markInvalid位于 form.field.Base 类中。

Ext.define('Ext.form.field.Base', {


    markInvalid : function(errors) {
        // Save the message and fire the 'invalid' event
        var me = this,
            oldMsg = me.getActiveError(),
            active;

        me.setActiveErrors(Ext.Array.from(errors)); //:(
        active = me.getActiveError();
        if (oldMsg !== active) {
            me.setError(active);
        }
    },

然后调用 setActiveErrors ，它位于 Ext.form.Labelable 中。

Ext.define("Ext.form.Labelable", {

    setActiveErrors: function(errors) {
        errors = Ext.Array.from(errors);
        this.activeError = errors[0];
        this.activeErrors = errors;
        this.activeError = this.getTpl('activeErrorsTpl').apply({ // :(
            errors: errors,
            listCls: Ext.plainListCls 
        });
        this.renderActiveError();
    },

getTpl 在 Ext.AbstractComponent 中被调用。此方法getTpl始终返回null，这是导致链中进一步导致“未定义”错误的原因。

Ext.define('Ext.AbstractComponent', {

    /**
     * @private
     */
    getTpl: function(name) {
        return Ext.XTemplate.getTpl(this, name); //:(
    },

此 getTpl 方法来自 XTemplates 类。

Ext.define('Ext.XTemplate', {

        getTpl: function (instance, name) {
            var tpl = instance[name], // go for it! 99% of the time we will get it!
                owner;

            if (tpl && !tpl.isTemplate) { // tpl is just a configuration (not an instance)
                // create the template instance from the configuration:
                tpl = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);

                // and replace the reference with the new instance:
                if (instance.hasOwnProperty(name)) { // the tpl is on the instance
                    owner = instance;
                } else { // must be somewhere in the prototype chain
                    for (owner = instance.self.prototype; owner && !owner.hasOwnProperty(name); owner = owner.superclass) {
                    }
                }
                owner[name] = tpl;
                tpl.owner = owner;
            }
            // else !tpl (no such tpl) or the tpl is an instance already... either way, tpl
            // is ready to return

            return tpl || null;
        }

getTpl函数尝试从实例（即文本字段）获取“activeErrorTpl”。因为它不能创建“未定义”错误。如果我们查看实例对象，它有类似的对象，如'acitveError'，'activeErrors'，但没有'activeErrorTpl'。

enter image description here

有没有人知道这里会出现什么问题？我是否需要为验证错误设置某种模板？

Answer 1

好的，我发现了问题所在。

在用于创建文本字段的工厂方法中，我们在initComponent（）方法中设置了itemId，如下所示：

xtype: 'textfield',
cls: clazz,
name: config.name,
initComponent: function () {
    this.itemId = itemId;
},

如果我只是将其移至正常配置，那么问题就会消失：

xtype: 'textfield',
cls: clazz,
name: config.name,
itemId : itemId,
initComponent: function () {
    //this.itemId = itemId;
},

Answer 2

我认为此错误源于以下事实：您实现了initComponent方法，而不是初始化父方法，例如您需要调用“ this.callParent（）”

Extjs验证边框不起作用

2 个答案: