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

Question

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

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

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

为了解决这个问题，我要做的就是确保选项卡面板的包含元素在渲染、重新渲染或其他任何操作时始终设置为 height:auto。我假设要完成此任务，我需要扩展 TabPanel，但我不知道从哪里开始以及要覆盖哪些方法等。有什么想法吗？

Answer 1

这就是我最终所做的。这绝对不理想，相当老套，但似乎工作正常。也许有人会更好地了解我现在正在尝试完成的任务，并且可以提出更好的实现:-)

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”值选项卡面板，以防止内容抵住面板底部。

Answer 2

吸引人的部分是让 ExtJS 知道组件已更新。基本上，您需要重新计算组件布局。您可以使用Panel 类提供的方法doLayout( )。通过调用此方法，您将强制要求重新计算和刷新布局。我想这应该对你有帮助。