Reputation: 169
i want to produce a vertical header title. Using headerPosition:'left' extjs automaticaly rotate my title, but what i want is to produce a title real vertical mode like this:
F
I
L
T
E
R
is that possibile?
Thanks anyone
Upvotes: 0
Views: 972
Reputation: 16150
It is possible. Rotation is mady by CSS transform
setting, so disabling it is also posiible by CSS. Example 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;
}
This works, and title look like you expect, it is invisible due to some layout positioning. I walked it around by changing inline style of title element in listener:
listeners: {
afterLayout: function() {
this.header.titleCmp.el.setStyle('left', '0');
}
}
Working sample: http://jsfiddle.net/28q5N/1/
Upvotes: 2