ExtJS4 - 扩展 Ext.tab.Panel 以防止设置高度值

Question

我正在将应用程序从 ExtJS 3.x 迁移到 v4，并且由于“autoHeight”属性已被删除，因此 TabPanel 出现了一些问题。我知道如果你没有明确定义面板的高度，它被假定为“自动高度”，但这只是在一定程度上是正确的。

在 ExtJS4 中，没有设置高度的选项卡面板仍然会在选项卡面板的包含 div 上设置内联 css 高度值，这些高度是根据每个选项卡项目内容的初始高度计算的。是的，如果您更新选项卡项的任何子组件的高度，将重新计算选项卡的高度以适应它，或者如果选项卡包含原始 HTML 并且选项卡的 update() 方法用于更改该内容，它的高度再次，将被调整以适应。

无论如何，在我的应用程序中，问题是我使用 ExtJS 框架中的方法以外的方法更新这些选项卡的原始 HTML 内容，例如 jQuery.html()。由于选项卡面板没有收到内容更改的通知，因此它不会重新计算选项卡的高度值。

为了解决这个问题，我要做的就是确保标签面板的包含元素在渲染、重新渲染或其他任何东西时始终设置为 height:auto。我假设要实现这一点，我需要扩展 TabPanel，但我不知道从哪里开始覆盖哪些方法等。有什么想法吗？

Answer 1

这就是我最终要做的。这绝对不是理想的，非常hacky，但它似乎工作正常。也许有人会更好地了解我现在要完成的工作，并提出更好的实现方案:-)

Ext.define('Ext.tab.AutoHeightPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.autoheighttabs',

    constructor: function(cnfg){
        this.callParent(arguments);
        this.initConfig(cnfg);
        this.on('afterlayout', this.forceAutoHeight, this);
        this.on('afterrender', this.forceAutoHeight, this);
        this.on('resize', this.forceAutoHeight, this);
    },

    forceAutoHeight: function(){
        this.getEl().applyStyles({height : 'auto', overflow : 'visible'});
        this.items.each(function(item, idx, len) {
            if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'});
        });
    }
});  

您可能希望向 style 添加一个“margin-bottom”值。配置选项卡面板以防止内容与面板底部对接。