css - 垂直文本不旋转 extjs

Question

我想制作一个垂直标题。使用 headerPosition:'left' extjs 自动旋转我的标题，但我想要的是生成一个标题真正的垂直模式，如下所示:

F

我

大号

T

E

R

这可能吗？

谢谢大家

Answer 1

这是可能的。 CSS transform 设置可以旋转，因此也可以通过 CSS 禁用它。示例 CSS:

#panel .x-panel-header-default-vertical .x-panel-header-text-container {
    -webkit-transform: none !important;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    overflow: visible;
}

#panel .x-panel-header-default-vertical .x-panel-header-text-container .x-header-text {
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre;

    width: 10px;
    height: 16px;
    display: block;
    overflow: visible;
}

这有效，标题看起来像您期望的那样，由于某些布局定位，它是不可见的。我通过更改监听器中 title 元素的内联样式来绕过它:

listeners: {
    afterLayout: function() {
        this.header.titleCmp.el.setStyle('left', '0');
    }
}

工作样本:http://jsfiddle.net/28q5N/1/