Fieldcontainer 错误地显示在工具栏中，标签顶部对齐

Question

放置 labelAlign 时，FieldContainer 未正确显示：'top'。

找到我的Fiddle：https://fiddle.sencha.com/#fiddle/1c2s 我创建了一个基于字段容器的自定义字段。如果将 window 的大小调整为较小的尺寸，您会看到文本字段将位于 fieldContiner 上方。

知道如何解决这个问题吗？任何解决方法？我已经尝试了几种方法，但我正在努力......我现在不知道我可以采取什么行动来改变这一点...... 我绝对需要解决这个问题。

提前致谢

（供参考：Sencha论坛中的Open bug：https://www.sencha.com/forum/showthread.php?311212-Fieldcontainer-incorrectly-displays-in-toolbar-with-label-aligned-top）

Answer 1

看起来确实像错误，但有一种非常简单的方法可以解决这个问题 - 只需将 minHeight: 65 设置到您的 url 字段即可。

Fiddle: https://fiddle.sencha.com/#fiddle/1caa

Answer 2

很高兴我找到了答案。 build src 和 doc 不匹配！

如果您检查文件 src/layout/component/field/FieldContainer.js 的内置源代码，您会注意到它与文档不对应（尤其是缺少一些方法，例如 calculateOwnerHeightFromContentHeight）。

注意：这已在 ExtJs 6.2.0

中修复

建议覆盖以解决此问题：

/**
 * Override to fix componentLayout wrong calculation of height when labelAlign='top'
 *
 * See post forum:
 * {@link https://www.sencha.com/forum/showthread.php?311212-Fieldcontainer-incorrectly-displays-in-toolbar-with-label-aligned-top}
 */
Ext.define('MyApp.overrides.layout.component.field.FieldContainer', {
    override: 'Ext.layout.component.field.FieldContainer',
    compatibility: [
        '6.0.0',
        '6.0.1',
        '6.0.2'
    ],

    /* Begin Definitions */

    calculateOwnerHeightFromContentHeight: function(ownerContext, contentHeight) {
        var h = this.callSuper([ownerContext, contentHeight]);
        return h + this.getHeightAdjustment();
    },

    calculateOwnerWidthFromContentWidth: function(ownerContext, contentWidth) {
        var w = this.callSuper([ownerContext, contentWidth]);
        return w + this.getWidthAdjustment();
    },

    measureContentHeight: function(ownerContext) {
        // since we are measuring the outer el, we have to wait for whatever is in our
        // container to be flushed to the DOM... especially for things like box layouts
        // that size the innerCt since that is all that will contribute to our size!
        return ownerContext.hasDomProp('containerLayoutDone') ? this.callSuper([ownerContext]) : NaN;
    },

    measureContentWidth: function(ownerContext) {
        // see measureContentHeight
        return ownerContext.hasDomProp('containerLayoutDone') ? this.callSuper([ownerContext]) : NaN;
    },

    publishInnerHeight: function(ownerContext, height) {
        height -= this.getHeightAdjustment();
        ownerContext.containerElContext.setHeight(height);
    },


    publishInnerWidth: function(ownerContext, width) {
        width -= this.getWidthAdjustment();
        ownerContext.containerElContext.setWidth(width);
    },

    privates: {
        getHeightAdjustment: function() {
            var owner = this.owner,
                h = 0;

            if (owner.labelAlign === 'top' && owner.hasVisibleLabel()) {
                h += owner.labelEl.getHeight();
            }

            if (owner.msgTarget === 'under' && owner.hasActiveError()) {
                h += owner.errorWrapEl.getHeight();
            }

            return h + owner.bodyEl.getPadding('tb');
        },

        getWidthAdjustment: function() {
            var owner = this.owner,
                w = 0;

            if (owner.labelAlign !== 'top' && owner.hasVisibleLabel()) {
                w += (owner.labelWidth + (owner.labelPad || 0));
            }

            if (owner.msgTarget === 'side' && owner.hasActiveError()) {
                w += owner.errorWrapEl.getWidth();
            }

            return w + owner.bodyEl.getPadding('lr');
        }
    }
});

Fieldcontainer 错误地显示在工具栏中，标签顶部对齐

Fieldcontainer incorrectly displays in toolbar with label aligned top

extjs

extjs6

extjs6-classic