PDA

View Full Version : Displaying keyboard shortcuts in menu



fiso
15 May 2008, 7:39 AM
Hi,
I was just wondering if someone could help with this issue:
I have normal menu items, and I'd like to add some labels to the right specifying the keyboard shortcut with which the item handler can be invoked.

I managed to come this far:


Ext.menu.Item.prototype.onRender = function(container, position){
var el = document.createElement("a");
el.hideFocus = true;
el.unselectable = "on";
el.href = this.href || "#";
if(this.hrefTarget){
el.target = this.hrefTarget;
}
el.className = this.itemCls + (this.menu ? " x-menu-item-arrow" : "") + (this.cls ? " " + this.cls : "");
el.innerHTML = String.format(
'<img src="{0}" class="x-menu-item-icon {2}" />{1} <span class="x-menu-item-keyshortcut">{3}</span>',
this.icon || Ext.BLANK_IMAGE_URL, this.text, this.iconCls || '', this.shortcutKey || '');
this.el = el;
Ext.menu.Item.superclass.onRender.call(this, container, position);
};

And in CSS:


.x-menu-item-keyshortcut{color:gray;position:absolute;right:10px;}


Adding that label is not as great problem, as adjusting the width of menu container, so that the label don't display over the menu item text. Another issue is that when there are sub-menus on item, the label should be rendered some more pixels from the right.

I have an idea how maybe the first problem can be solved, but I'd like to hear more elegant solutions ;) In the Ext.menu.Menu autoWidth method I could add some loop that finds the longest shortcut label width and adjust the item size according to that width.

Can you help?
Thanks in advance