ExtJS 4 Panel - 折叠时的文本方向答案

【问题标题】：ExtJS 4 Panel - text direction when collapsedExtJS 4 Panel - 折叠时的文本方向
【发布时间】：2015-03-03 04:32:17
【问题描述】：

我有一个向左侧折叠的面板，折叠时，标题从上到下垂直书写。有没有办法让标题显示在同一位置，但从下到上书写？

谢谢！

【问题讨论】：

标签： extjs4 panel collapse

【解决方案1】：

我能够通过用 :-

覆盖 extjs 类来从下到上渲染它

.x-panel-header-default-vertical .x-panel-header-text-container {
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: 0 0;
  -o-transform: rotate(-90deg);
  -o-transform-origin: 0 0;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  display: block;
  position: absolute !important;
  top: 85px !important;
  left: 0px !important;
}

Working Demo in jsFiddle

【讨论】：

感谢您的帮助，但首先您的文本与组件的底部对齐，我希望它与组件的顶部对齐（“相同位置”作为默认行为），其次在您的 CSS 中，您的像素值对应于文本的长度（“85px”），因此它不是通用解决方案。

【解决方案2】：

好的，我想我找到了解决方案（margin-left 不是强制性的）：

.x-panel-header-body-default-collapsed-left span.x-header-text{
   transform:rotate(180deg);
   position:relative;
   bottom:0;
   text-align:right;
   display:block;
   margin-left: 4px;
}

jsFiddle

【讨论】：