我正在将应用程序从 ExtJS 3.x 迁移到 v4,并且由于“autoHeight”属性已被删除,所以 TabPanel 遇到了一些问题。我知道,如果您没有明确定义面板的高度,则假定它是“自动高度”,但这仅在一定程度上是正确的。
在 ExtJS4 中,未设置高度的选项卡面板仍将在选项卡面板的包含 div 上设置内联 css 高度值,并且这些高度是根据每个选项卡项内容的初始高度计算的。是的,如果您更新选项卡项目的任何子组件的高度,选项卡的高度将被重新计算以适应它,或者如果选项卡包含原始 HTML 并且选项卡的 update() 方法用于更改该内容,其高度将再次调整以适合。
无论如何,在我的应用程序中,问题在于我使用 ExtJS 框架中的方法以外的方法(例如 jQuery.html())更新这些选项卡的原始 HTML 内容。由于选项卡面板没有收到有关内容更改的通知,因此它不会重新计算选项卡的高度值。
为了解决这个问题,我要做的就是确保选项卡面板的包含元素在渲染、重新渲染或其他任何操作时始终设置为 height:auto。我假设要完成此任务,我需要扩展 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
配置添加“margin-bottom”值,以防止内容紧贴面板底部。
关于ExtJS4 - 扩展 Ext.tab.Panel 以防止设置高度值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8302176/