如何在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面板中旋轉三角形摺疊圖標？

回答

相關問題