2

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

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

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

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

4

2 回答 2

2

这就是我最终做的。这绝对不是理想的，非常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”值，以防止内容与面板底部对接。

于 2011-12-02T14:22:07.163 回答
1

吸引人的部分是让 ExtJS 意识到组件已更新。您基本上需要重新计算组件布局。您可以使用doLayout( )Panel 类可用的方法。通过调用它，您强制要求重新计算和刷新布局。我认为这应该可以帮助你。

于 2011-11-29T06:13:18.003 回答