extjs - 使用 Ext JS 按钮显示键盘快捷键

Question

我有一个带有几个按钮的按钮组，每个按钮都有一个与之关联的键盘快捷键。

我怎样才能在按钮上同时指示键盘快捷键以及按钮文本？虽然其他选项（如工具提示）可用，但我希望它能够工作。

Answer 1

您必须扩展按钮并更改 renderTpl，以便您可以将快捷方式 txt 添加到其中并使其正确浮动。我通过以下方式为 menuItem 完成了此操作：

Ext.define('Ext.ux.menu.ShortcutItem', {
    extend: 'Ext.menu.Item',
    alias: 'widget.shortcutitem',
    shortcutText: '', 
    renderTpl: [
        '<tpl if="plain">',
            '{text}',
        '<tpl else>',
            '<a id="{id}-itemEl" class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">',
                '<img id="{id}-iconEl" src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />',
                '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="arrowCls">style="margin-right: 17px;"</tpl> >{text}</span>',
                '<span class="' + Ext.baseCSSPrefix + 'menu-item-text shortcutitem-shrtTxt">{shortcutText}</span>', 
                '<img id="{id}-arrowEl" src="{blank}" class="{arrowCls}" />',
            '</a>',
        '</tpl>'
    ],
    beforeRender: function (ct, pos) {
        var me = this;
        Ext.applyIf(me.renderData, {
            shortcutText: me.shortcutText
        });
        me.callParent(arguments);
    }
});

和CSS：

/* Shortcut menu item */
.shortcutitem-shrtTxt
{
    position: absolute;
    right: 3px;
    top: 7px;
}