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

ff29svar 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(111)

有没有办法旋转面板中的折叠图标（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个面板，第二个面板（resultsview）上的折叠图标是上面发布的图片中显示的，也是我试图修复的。

css

来源：https://stackoverflow.com/questions/10146006/how-to-rotate-triangle-collapse-icon-in-ext-js-panel

2条答案

按热度按时间

fnatzsnv1#

父容器的布局是什么？我想你可以使用layout: border，并为底部面板指定region: south，它将有向下箭头。
至于试图修复您的确切样本-尝试移动collapsible: true从defaults内的底部面板定义。

赞(0）回复(0）举报 2022-11-27

bwleehnv2#

你可以只改变图像的背景位置。下面是所有工具图像的sprite：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文件之后加载的样式表）更新为以下内容来切换它们（只需切换background-positions）：

.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;
}

赞(0）回复(0）举报 2022-11-27

我来回答

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

2条答案

相关问题

热门标签

最新问答