如何在Ext Js面板中旋转三角形折叠图标？

有没有办法在面板中旋转折叠图标（http://i.imgur.com/2ZvKd.png）？由于面板倒塌的方向与图标表示的方向相反，因此方向有点令人误解。如何在Ext Js面板中旋转三角形折叠图标？

defaults: { 
      collapsible: true, 
      animFloat: true, 
      autoHide: true, 
      cmargins: '5 5 5 5' 
     }, 
     items: 
     [{ 
      xtype: 'createreportview', 
      bodyStyle:{ padding: '10px'}, 
      minHeight:280, 
      flex: 0.40 
     }, 
     { 
      xtype: 'splitter', 
      collapseTarget:'prev' 
     }, 
     { 
      xtype: 'resultsview', 
      flex: 0.60 
     }] 
}

有2块板，在第二面板（resultsview）折叠图标是上面贴在图像中示出的一个，并且是一个即时试图修复。

来源

2012-04-13 Armaan

您使用的是ExtJs3还是4？ – sha 2012-04-13 18:26:03

@sha Ext Js 4.1 RC3 – Armaan 2012-04-13 18:29:01

您可以更改图像的背景位置。这里是所有的工具图像的精灵：http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/themes/images/default/tools/tool-sprites.gif

如果你去http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/border.html和检查箭头元素（上下面板上的箭头，你可以看到在CSS设置背景位置值

对于向下箭头的位置：

x-tool-expand-top, .x-tool-collapse-top { 
    background-position: 0 -210px; 
}

的向上箭头的位置：

.x-tool-over .x-tool-expand-bottom, .x-tool-over .x-tool-collapse-bottom { 
    background-position: -15px -195px; 
}

你可以更新的CSS（使用样式表在ext的css文件后加载）到下面来切换它们（只需切换背景位置）：

.x-tool-expand-top, .x-tool-collapse-top { 
    background-position: -15px -195px; 
} 

.x-tool-over .x-tool-expand-bottom, .x-tool-over .x-tool-collapse-bottom { 
    background-position: 0 -210px; 
}

来源

2012-04-13 18:53:50 therat

父容器的布局是什么？我认为你可以使用layout: border，并为你的底部面板指定region: south，它会有向下箭头。

至于试图解决你的确切样本 - 尝试从defaults底部面板定义内移动collapsible: true。

来源

2012-04-13 18:31:32 sha

这个布局是一个vbox，把它改成了与''：south''一样的底部面板的边界，现在图标确定了它自己的正确方向，但是接着我要把splitter放在'split：true '在'defaults'中。分割指针始终指向中心区域面板，但我希望它指向createreportview面板，以便可以完全展开结果。还尝试为顶部面板设置'region：north'，但它又一次弄乱了崩溃方向。 – Armaan 2012-04-13 18:48:55

你可以把你现在拥有的画面截图吗？以及新代码的外观如何？ – sha 2012-04-13 18:49:58

http://i.imgur.com/tM0V6.png目前底部面板设置为'region：center'。图像中的'1'是指他如何将指针分割指向并展开到顶部，但'2'即使向上指向也会向下塌陷。 – Armaan 2012-04-13 18:54:19

如何在Ext Js面板中旋转三角形折叠图标？

回答

相关问题