extjs TabPanel 多行标题

最新推荐文章于 2019-05-24 11:58:55 发布

最新推荐文章于 2019-05-24 11:58:55 发布 · 295 阅读

Javascript架构同时被 2 个专栏收录

11 篇文章

订阅专栏

CSS3

6 篇文章

订阅专栏

本文介绍如何在Next.js应用中调整TabPanel组件的标题布局，使其能够支持多行显示，并且在启用enableTabScroll时避免样式问题。通过覆盖adjustBodyWidth函数，确保标题宽度适配，同时关闭enableTabScroll选项来实现美观的多行显示效果。

extjs TabPanel 的标题只能单行，如果设置enableTabScroll为true会滚动，如果想实现多行显示，只要覆盖

adjustBodyWidth : function(w){
        if(this.header){
            this.header.setWidth(w);
        }
        if(this.footer){
            this.footer.setWidth(w);
        }
        return w;
    },

为

adjustBodyWidth : function(w){
        if(this.header){
            this.header.setWidth(w);
        }
        if(this.footer){
            this.footer.setWidth(w);
        }
　　　if(this.strip){
            this.strip.setWidth(w);
        }
        return w;
    },

即可，此时enableTabScroll应该为false,但会发现样式不好看，需要自己调整。