ExtJS Label orientation

Question

How do I make an ExtJS Label rendered horizontally as in:

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

render vertically as in:

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

including the text within it of course.

In css I would set the text's style using writing-mode: vertical-lr; to write the text in the appropriate direction (source). But in this case, in order for the components housing the label to render at the proper size, I need to change the direction of the whole container.

Therefore, is this possible in ExtJS 4.1+? If yes, how? A fiddle would be highly appreciated!

score 3 · Accepted Answer · answered Apr 05 '13 at 21:08

In order to do this with ExtJS, you need to draw the text item at 90 degrees:

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()
});

This creates a panel with a text item rotated to 90°. This code sample can be found in the ExtJS documentation on Ext.draw.Text, and is available in 4.1.0 and later. Here's a fiddle of the above code as requested.

ExtJS Label orientation

1 Answers1