Question

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

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

有什么想法吗？

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”值，以防止内容与面板底部对接。

Answer 2

我有同样的问题，我的解决方案并不好，但我知道我的内容何时更新，所以只需要在必要时调用面板上的doComponentLayout（）。

创建一个＆＃34;自动高度＆＃34; ExtJS 4中的TabPanel是否呈现为非extjs HTML？

2 个答案: