extjs - ExtJSボタンでキーボードショートカットを表示する

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;
}