css - 垂直テキスト回転しないextjs

Question

縦長のヘッダータイトルを作りたいです。headerPosition:'left' extjs を使用すると、タイトルが自動的に回転しますが、私が望むのは、次のようなタイトルの実際の垂直モードを生成することです。

ふ

私

L

T

え

R

それは可能ですか？

ありがとう

Answer 1

可能です。回転は CSStransformの設定で変更できるので、無効にすることも 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;
}

これは機能し、タイトルは期待どおりに見えますが、レイアウトの配置が原因で表示されません。リスナーのタイトル要素のインライン スタイルを変更することで、それを歩き回りました。

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

作業サンプル: http://jsfiddle.net/28q5N/1/