ExtJS 4 - 内部组件在使用 resizeHandles 调整大小后不调整适合布局

Question

我有几个面板，我可以将它们拖放到其他地方。其中一些具有 resizeHandles 以手动更改其高度。如果我拖动一个面板并将其放置在宽度小于面板的某个位置，并且它的 children（工具栏、header 等）也会改变宽度。但是当我改变高度然后像上面写的那样拖动一个面板时，只有主面板的宽度在改变，children 保持相同的大小。面板看起来像这样：

{
    xtype: 'panel',
    layout: 'fit',
    resizable: true,
    resizeHandles: 's',
    draggable: {
            moveOnDrag: false
    },
    items: [
        toolbar or panel or container (depends on the panel)
    ]
}

我在想，它在调整大小后改变了布局中的某些东西，但我找不到任何东西。我试图调试它，但几乎不可能找出问题所在。尝试了 doLayout()、doComponentLayout() 但似乎没有任何效果。现在我没主意了。

Answer 1

好的，所以我调试了这个问题很长时间，我发现，在使用 resizeHandles 调整面板大小后，它们的宽度变为属性，并且在拖动后它以某种方式影响了面板所以它不会调整大小。解决方案是在调整大小后立即删除宽度属性，现在它工作正常。

编辑：

代码的侦听器部分是解决方案。也许不是最好的方法，但它确实有效。

{
    xtype: 'panel',
    layout: 'fit',
    resizable: true,
    resizeHandles: 's',
    draggable: {
            moveOnDrag: false
    },
    items: [
        toolbar or panel or container (depends on the panel)
    ],
    listeners: {
            resize: function(component, ...) {
                    delete component.width;
            }
    }
}

ExtJS 4 - 内部组件在使用 resizeHandles 调整大小后不调整适合布局

ExtJS 4 - Inner component not resizing in fit layout after resize with resizeHandles

javascript

html

extjs4.2