Question

我正在将一个应用程序从ExtJS 3.x迁移到v4，并且现在已经在TabPanel上遇到了一些问题，因为＆＃34; autoHeight＆＃34;财产已被删除。我知道如果你没有明确定义面板的高度，它被认为是＆＃34;自动高度＆＃34;，但这只是一定程度的真实。

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

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

为了解决这个问题，我要做的就是确保选项卡面板的包含元素始终设置为高度：自动渲染，重新渲染或其他任何内容。我假设要完成这项工作，我需要扩展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”值，以防止内容与面板底部对接。

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

1 个答案: