Question

有没有办法在面板中旋转折叠图标（http://i.imgur.com/2ZvKd.png）？由于面板在与图标所指示的方向相反的方向上坍塌，因此方向有点误导。

   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个面板，第二个面板上的折叠图标（结果视图）是上面发布的图像中显示的图标，是我试图修复的那个。

Answer 1

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

至于尝试修复确切的样本 - 尝试从底部面板定义中的collapsible: true移动defaults。

Answer 2

您只需更改图像的背景位置即可。以下是所有工具图像的精灵：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;
}

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

2 个答案: