Отображение сочетания клавиш с кнопкой Ext JS

Question

У меня есть группа кнопок с несколькими кнопками, каждая из которых имеет сочетание клавиш.

Как я могу также указать сочетание клавиш вместе с текстом кнопки на кнопке? Хотя доступна другая опция, например всплывающая подсказка, я хочу, чтобы это работало.

Answer 1

Вам нужно будет расширить кнопку и изменить renderTpl, чтобы вы могли добавить в нее свой ярлык и всплыть правильно. Я сделал это для 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;
}