Extjs Fieldcontainer不正确地显示在标签顶部对齐的工具栏中

放置labelAlign:“top”时，FieldContainer无法正确显示

找到我的小提琴： 我创建了一个基于字段容器的自定义字段。 如果将窗口大小调整为较小的大小，您将看到文本字段将位于fieldContiner的上方

你知道怎么解决这个问题吗？有解决办法吗？ 我试过几种方法，但我正在努力。。。我现在不知道在哪里我可以采取行动来改变这个。。。 我必须解决这个问题

提前谢谢

---

（供参考：Sencha论坛中的Open bug:）

看起来确实很像bug，但有一种非常简单的方法可以实现这一点——只需将

minHeight:65

设置到您的url字段

---

Fiddle:

看起来确实像是一个bug，但有一个非常简单的方法可以实现这一点——只需将

minHeight:65

设置到您的url字段

---

小提琴手：

我很高兴找到了答案。 构建src和文档之间存在不匹配

如果您在构建的源代码中签入文件

src/layout/component/field/FieldContainer.js

，您会注意到它与文档不对应（尤其是缺少一些方法，如

CalculateOwnerHeight fromContentHeight

）

注意：这已在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');
        }
    }
});

---

我很确定我找到了答案。 构建src和文档之间存在不匹配

如果您在构建的源代码中签入文件

src/layout/component/field/FieldContainer.js

，您会注意到它与文档不对应（尤其是缺少一些方法，如

CalculateOwnerHeight fromContentHeight

）

注意：这已在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');
        }
    }
});

---

我记得我早些时候（2014？）报告了这个bug。IIRC我当时没有找到一个完整的解决方法，但是删除了vbox布局，这就成功了。是的。。。这将是一个“简单”的解决方案，但如何才能取代它？用什么？（顺便说一下，这是

hbox

而不是

vbox

）。如果我用

表单更改容器中的
vbox
，它不会考虑
labelAlign:“top”
如果您在小提琴中搜索
vbox
（而不是
hbox
！）并删除您找到的布局，您将看到，通过纯粹的魔法，
labelAlign
被正确应用。但是您必须找到另一种方法来获得类似
align:'stretch'
，这是
layout:'auto'
所不支持的。也就是说，我认为Sencha不确定缺陷是与fieldcontainer还是与box layout有关，这就是为什么没有人关心的原因（两个代码所有者都声明“我的代码是干净的”等着另一个人收拾残局）好的，明白了。但是是的。。。
align:'stretch'
需要其他内容。我会试着记住我之前（2014？）报告过这个bug。IIRC我当时没有找到一个完整的解决方法，但是删除了vbox布局，这就成功了。是的。。。这将是一个“简单”的解决方案，但如何才能取代它？用什么？（顺便说一下，这是
hbox
而不是
vbox
）。如果我用
表单更改容器中的
vbox
，它不会考虑
labelAlign:“top”
如果您在小提琴中搜索
vbox
（而不是
hbox
！）并删除您找到的布局，您将看到，通过纯粹的魔法，
labelAlign
被正确应用。但是您必须找到另一种方法来获得类似
align:'stretch'
，这是
layout:'auto'
所不支持的。也就是说，我认为Sencha不确定缺陷是与fieldcontainer还是与box layout有关，这就是为什么没有人关心的原因（两个代码所有者都声明“我的代码是干净的”等着另一个人收拾残局）好的，明白了。但是是的。。。
align:'stretch'
需要其他内容。我将尝试使用@krysztof来解决这个问题。不过，这是一个更宽的用例的简单案例。。。我有FieldContainer，它要复杂得多，高度可以改变（根据用户操作）。我现在不知道如何处理这个问题……大小调整似乎有效，所以唯一的问题是将
height
复制到
minHeight
中。例如，可以使用
render
和
resize
处理程序来执行此操作。检查更新的小提琴：你的解决方案工程。。。很好这并不完美。我有一些FieldContainer用于隐藏/显示面板，如果它显示某些内容并在之后隐藏，则大小不会得到很好的计算，大小保持为“大的”。另一方面，我注意到这似乎不是所使用的正确组件布局！如果使用带有
Ext.getCmp
的字段容器，请转到
componentLayout。从ContentHeight计算OwnerHeight
您会看到它指向布局方法
auto
。。。在我看来，这就是原因……感谢@krysztof提供的解决方案。不过，这是一个更宽的用例的简单案例。。。我有FieldContainer，它要复杂得多，高度可以改变（根据用户操作）。我现在不知道如何处理这个问题……大小调整似乎有效，所以唯一的问题是将
height
复制到
minHeight
中。例如，可以使用
render
和
resize
处理程序来执行此操作。检查更新的小提琴：你的解决方案工程。。。很好这并不完美。我有一些FieldContainer用于隐藏/显示面板，如果它显示某些内容并在之后隐藏，则大小不会得到很好的计算，大小保持为“大的”。另一方面，我注意到这似乎不是所使用的正确组件布局！如果使用带有
Ext.getCmp
的字段容器，请转到
componentLayout。从ContentHeight计算OwnerHeight
您会看到它指向布局方法
auto
。。。在我看来这就是原因。。。