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

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

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

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

---

为了解决这个问题，我要做的就是确保选项卡面板的包含元素始终设置为“高度”：渲染时自动、重新渲染或其他任何设置。我假设要实现这一点，我需要扩展TabPanel，但是我不知道从哪里开始，比如覆盖哪些方法等等。有什么想法吗？

引人注目的部分是让ExtJS意识到组件已经更新。基本上，您需要重新计算组件布局。您可以使用Panel类提供的方法

doLayout（）

。通过调用此函数，您强制要求重新计算和刷新布局。我想这应该对你有所帮助。

这就是我最后所做的。这绝对不是理想的，相当粗糙，但似乎工作正常。也许有人会更好地看到我现在试图实现的目标，并能想出一个更好的实现：-）

---

您可能希望在选项卡面板的

样式
配置中添加“边距底部”值，以防止内容与面板底部对接。
您是否尝试过
高度：“自动”
？是的，尝试过。当在选项卡面板配置中将高度设置为“自动”时，面板以18px的高度呈现。是的，这正是我希望避免的，因为最终我认为这样做会增加很多代码，试图找到内容高度可以更改的每个实例，并确保它在之后调用doLayout（），可能会错过一些不太清楚的案例。我认为，只要修改tabpanel自身的内部布局功能，使其“不在乎”高度，并让面板根据自然文档流进行扩展以适应其内容，就会更加优雅，并涵盖我的所有基础。
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'});
        });
    }
});