我在 extjs7.4 中使用菜单按钮，但没有出现图标图像

Question

我使用 extjs 7.4 版。

在Sencha的例子中图标清晰可见。 https://examples.sencha.com/extjs/7.4.0/examples/kitchensink/#menu-buttons

但是，我的实际代码中没有显示图标 screenshot

我的来源有问题吗？还是 Sencha 错误？

--- 来源 ---

Ext.define('test.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

    toggleDisabled: function(checkbox, checked) {
        var view = this.getView(),
            stateFn = checked ? 'disable' : 'enable',
            buttons = view.query('button');

        Ext.each(buttons, function(btn) {
            btn[stateFn]();
        });
    }
});

Ext.define('test.view.main.Main', {
    extend: 'Ext.Container',
    xtype: 'menu-buttons',
    controller: 'main',

    layout: 'vbox',
    width: 470,

    items: [{
        xtype: 'checkbox',
        boxLabel: 'Disabled',
        margin: '0 0 0 10',
        listeners: {
            change: 'toggleDisabled'
        }
    }, {
        xtype: 'container',
        layout: {
            type: 'table',
            columns: 4,
            tdAttrs: { style: 'padding: 5px 10px;' }
        },
        defaults: {
            menu: [{
                text: 'Menu Item 1'
            }, {
                text: 'Menu Item 2'
            }, {
                text: 'Menu Item 3'
            }]
        },

        items: [{
            xtype: 'component',
            html: 'Text Only'
        }, {
            xtype: 'button',
            text: 'Small'
        }, {
            xtype: 'button',
            text: 'Medium',
            scale: 'medium'
        }, {
            xtype: 'button',
            text: 'Large',
            scale: 'large'
        }, {
            xtype: 'component',
            html: 'Icon Only'
        }, {
            iconCls: 'button-home-small',
            xtype: 'button'
        }, {
            xtype: 'button',
            iconCls: 'button-home-medium',
            scale: 'medium'
        }, {
            xtype: 'button',
            iconCls: 'button-home-large',
            scale: 'large'
        }, {
            xtype: 'component',
            html: 'Icon and Text (left)'
        }, {
            xtype: 'button',
            iconCls: 'button-home-small',
            text: 'Small'
        }, {
            xtype: 'button',
            iconCls: 'button-home-medium',
            text: 'Medium',
            scale: 'medium'
        }, {
            xtype: 'button',
            iconCls: 'button-home-large',
            text: 'Large',
            scale: 'large'
        }, {
            xtype: 'component',
            html: 'Icon and Text (top)'
        }, {
            xtype: 'button',
            iconCls: 'button-home-small',
            text: 'Small',
            iconAlign: 'top'
        }, {
            xtype: 'button',
            iconCls: 'button-home-medium',
            text: 'Medium',
            scale: 'medium',
            iconAlign: 'top'
        }, {
            xtype: 'button',
            iconCls: 'button-home-large',
            text: 'Large',
            scale: 'large',
            iconAlign: 'top'
        }, {
            xtype: 'component',
            html: 'Icon and Text (right)'
        }, {
            xtype: 'button',
            iconCls: 'button-home-small',
            text: 'Small',
            iconAlign: 'right'
        }, {
            xtype: 'button',
            iconCls: 'button-home-medium',
            text: 'Medium',
            scale: 'medium',
            iconAlign: 'right'
        }, {
            xtype: 'button',
            iconCls: 'button-home-large',
            text: 'Large',
            scale: 'large',
            iconAlign: 'right'
        }, {
            xtype: 'component',
            html: 'Icon and Text (bottom)'
        }, {
            xtype: 'button',
            iconCls: 'button-home-small',
            text: 'Small',
            iconAlign: 'bottom'
        }, {
            xtype: 'button',
            iconCls: 'button-home-medium',
            text: 'Medium',
            scale: 'medium',
            iconAlign: 'bottom'
        }, {
            xtype: 'button',
            iconCls: 'button-home-large',
            text: 'Large',
            scale: 'large',
            iconAlign: 'bottom'
        }]
    }]
});

我已经研究了好几天了，但找不到解决方案。

感谢您的帮助。

Answer 1

我猜你错过了定义类的地方：

作为替代方案，您可以尝试这样设置图标：

iconCls:'x-fa fa-home'

您需要哪个前缀取决于您的 FontAwesome 版本。

按照这种方法，您可能需要额外的类来缩放图标。但我不确定。

我在 extjs7.4 中使用菜单按钮，但没有出现图标图像

I'm using the menu button in extjs7.4, but the icon image doesn't appear

button

extjs

menu