Extjs 验证边框不起作用答案

【问题标题】：Extjs Validation Border not workingExtjs 验证边框不起作用
【发布时间】：2015-02-13 10:10:20
【问题描述】：

我们的验证边界在我们的应用程序中不再起作用（它以前起作用）。不幸的是，该错误无法在小提琴中重现，但是我试图尽可能深入地挖掘 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”。

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

【问题讨论】：

标签： extjs extjs4

【解决方案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;
},

【讨论】：

【解决方案2】：

我认为这个错误源于您实现了 initComponent 方法并且没有初始化父级的事实，例如你需要调用“this.callParent()”

【讨论】：