1

这在 3.x 中很容易做到，只需通过“默认”配置设置 TabPanel 的“autoHeight”属性并为其子项设置相同的属性。但是，我还没有看到在 4.x 中实现这一点的方法。选项卡的大小适合其内容的初始高度，但是如果该内容的高度在初始化后因任何原因发生变化，则选项卡内容将被隐藏/滚动。

我已经进行了一些搜索，并且在 sencha 的官方论坛中关于这个主题的最常见建议的解决方案是将 tabpanel 的父容器的布局配置为“fit”，将 align 设置为“stretch”等。但是在我的情况下，TabPanel 不是一个孩子对于另一个 Ext 组件，它是“renderTo”生成的直接非 ext，它位于我的页面主体的某个位置，因此这些解决方案不适用。

有任何想法吗？

4

2 回答 2

3

如果有人感兴趣，这是我的解决方案：这绝对不是理想的，非常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-06T14:35:13.303 回答
1

我遇到了同样的问题，我的解决方案也不是很好，但是我知道我的内容何时更新，所以只需要在必要时在面板上调用 doComponentLayout() 即可。

于 2012-12-11T00:59:50.153 回答