いくつかのボタンがあるボタングループがあり、それぞれにキーボードショートカットが関連付けられています。
ボタンに、ボタンのテキストと一緒にキーボードショートカットを表示するにはどうすればよいですか?ツールチップのような他のオプションも利用できますが、これを機能させたいと思います。
いくつかのボタンがあるボタングループがあり、それぞれにキーボードショートカットが関連付けられています。
ボタンに、ボタンのテキストと一緒にキーボードショートカットを表示するにはどうすればよいですか?ツールチップのような他のオプションも利用できますが、これを機能させたいと思います。
ボタンを拡張し、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;
}