Favorite/star/bookmark Extjs 中的切换按钮

Question

如何在 Extjs 中切换星形按钮，所以当状态为 'pressed' 时它看起来像一个实心星，否则像一个轮廓星？

例如，如 Google chrome 地址栏中出现的星标以将页面添加为书签：

单击它时，它的外观会更改为

或者它可能是一颗心变成

或者在 gmail 中

Answer 1

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

（也集成了FontAwesome5）

这里是 Link 到 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',
                            title: 'The button was clicked...',
                            width: 250,
                            align: 't'
                        });
                    };

                }
            }]
        });
    }
});

Answer 2

面板 header:

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">

Favorite/star/bookmark Extjs 中的切换按钮

Favorite/star/bookmark toggle button in Extjs

favorites

bookmarks

extjs

button