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

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

1 个答案: