EXTJS4-扩展Ext.Tab.panel以防止设置高度值

StackOverflow https://stackoverflow.com/questions/8302176

题

我正在将应用程序从ExtJS 3.X迁移到V4，并且由于“自动启示”属性已被删除，因此对TabPanel的应用程序遇到了一些麻烦。我知道，如果您不明确定义面板的高度，则假定为“自动高度”，但这仅在某个程度上是真实的。

在ExtJS4中，一个没有高度集的选项卡面板仍将在包含DIV的“选项卡”面板上设置内联CSS高度值，并且这些高度是根据每个标签项目内容的初始高度计算得出的。是的，如果您更新选项卡项目的任何子组件的高度，则将标签的高度重新计算以适合它，或者Tab包含RAW HTML，并且使用Tab的Update（）方法来更改该内容，则再次将其高度调整为合适。

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

为了解决这个问题，我要做的就是确保呈渲染，重新渲染或其他任何内容时，标签面板的包含元素始终设置为高度：自动。我假设要实现这一目标，我需要扩展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'});
        });
    }
});

您可能需要在 style 选项卡面板的配置，以防止内容靠在面板的底部。

其他提示

吸引人的部分是使ExtJ知道该组件已更新。您基本上需要重新计算组件布局。您可以使用该方法 doLayout( ) 可与面板类一起使用。通过称呼此功能，您会强行要求将布局重新计算和刷新。我认为这应该为您提供帮助。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top