Extjs 中的收藏夹/星标/书签切换按钮

问题描述

如何在 Extjs 中切换星形按钮，以便在“按下”状态时它看起来像一个实心的星星，否则像一个轮廓星形？

例如，像谷歌浏览器地址栏中出现的星号来为页面添加书签：

当它被点击时，它的外观会变成

或者它可能是一颗心

变成了

或在 gmail

解决方法

为此，您可以使用视图模型绑定到 iconCls。每个按钮都有配置：enableToggle: true，它会将其按下状态发布到父视图模型。使用 iconCls: '{theButton.pressed?"fas fa-star":"far fa-star"}' 的绑定表达式使其工作。

（也集成了 FontAwesome5）

这是 Sencha-Fiddle 的链接

代码：

    Ext.application({
    name: 'Fiddle',launch: function () {
        Ext.create('Ext.Container',{
            renderTo: Ext.getBody(),layout: 'vbox',viewModel: {},// <-- important
            items: [{
                xtype: 'button',text: 'Bookmark',enableToggle: true,bind: {
                    iconCls: '{theButton.pressed?"fas fa-star":"far fa-star"}',},reference: 'theButton',handler: function (button) {
                    if (button.pressed) {
                        Ext.toast({
                            html: 'pressed state',title: 'The button was clicked...',width: 250,align: 't'
                        });
                    } else {
                        Ext.toast({
                            html: 'unpressed state',align: 't'
                        });
                    };

                }
            }]
        });
    }
});

,

对于面板标题：

Ext.application({
    name: 'Fiddle',launch: function () {
        Ext.create('Ext.panel.Panel',{
            title: 'Sample Panel',tools: [{
                glyph: 'xf005@FontAwesome',pressed: false,callback: function () {
                    if (this.pressed) {
                        this.setGlyph('xf005@FontAwesome'); // star
                    } else {
                        this.setGlyph('xf006@FontAwesome'); // star-o
                    }
                    this.pressed = !this.pressed;
                }
            }],renderTo: Ext.getBody()
        });
    }
});

以及 index.html 的字体很棒的样式

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">