ExtJS 标签方向

【问题标题】：ExtJS Label orientationExtJS 标签方向
【发布时间】：2013-04-05 21:00:40
【问题描述】：

如何使 ExtJS Label 水平呈现，如下所示：

------------
-          -
------------

垂直渲染如下：

----
-  -
-  -
-  -
----

当然包括其中的文字。

在 css 中，我将使用 writing-mode: vertical-lr; 设置文本样式，以将文本写入适当的方向 (source)。但是在这种情况下，为了让包含标签的组件以适当的大小呈现，我需要改变整个容器的方向。

因此，这在 ExtJS 4.1+ 中是否可行？如果是，如何？ fiddle 将不胜感激！

【问题讨论】：

标签： javascript css extjs

【解决方案1】：

为了使用 ExtJS 做到这一点，您需要将文本项绘制成 90 度：

Ext.create('Ext.panel.Panel', {
    title: 'Panel with VerticalTextItem',
    width: 300,
    height: 200,
    lbar: {
        layout: {
            align: 'center'
        },
        items: [{
            xtype: 'text',
            text: 'Sample VerticalTextItem',
            degrees: 90
        }]
    },
    renderTo: Ext.getBody()
});

这将创建一个面板，其中包含旋转到 90° 的文本项。此代码示例可以在ExtJS documentation on Ext.draw.Text 中找到，并且在 4.1.0 及更高版本中可用。 Here's a fiddle of the above code as requested.

【讨论】：