Extjs验证边界不工作

我们的验证边界在我们的应用程序中不再起作用（它以前起作用）。不幸的是，这个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);
        }
    },

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;
        }

然后调用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，这是导致链中进一步出现“undefined”错误的原因

Ext.define('Ext.AbstractComponent', {

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

这个getTpl方法来自XTemplates类

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);
        }
    },

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”。因为无法定义，所以创建了“未定义”错误。若我们查看实例对象，它有类似的对象，如“acitvierror”、“activeErrors”，但并没有“activeErrorTpl”

---

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

好的，我发现了问题所在

用于创建textfields的In-out factory方法我们在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;
},

---

我认为这个错误源于这样一个事实，即您实现了initComponent方法，而没有初始化父对象，例如，您需要调用“this.callParent（）”