PDA

View Full Version : Dynamically updating Href for MenuItem



aleklados
6 Mar 2014, 1:37 AM
In my application I have a toolbar with menu items and a tab panel. I need to update href of Ext.menu.Item (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.menu.Item) element so the link content is related to active tab in tab panel. (uses tab title to search in Wiki). Now Menu Item doesn't have a setHref() method the same way as Ext.button.Button (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.button.Button).
I have found this thread (http://www.sencha.com/forum/showthread.php?29173-how-to-change-menu-item-s-href-dynamically) that was proposing a solution for ExtJS 2.0 but unfortunately it is not working in ExtJS 4.2. Below is a snippet of the proposed solution:


Ext.override(Ext.menu.Item,{
setHref: function(href, target) {
this.href = href;
this.el.href = this.href || '#';
this.hrefTarget = target || this.hrefTarget;
if (this.hrefTarget)
this.el.target = this.hrefTarget;
}
});

This is also what I have found out myself by inspecting the source code of Button.setHref() (http://docs.sencha.com/extjs/4.2.2/source/Button.html#Ext-button-Button-method-setHref) function.

The interesting part is that after running this code href property on Menu Item is updated, but link is still pointing to the original location. After further inspection I have noticed that menuitem.el.dom.innerHTML is still showing original href (like below)

<a id="menuitem-1092-itemEl" class="x-menu-item-link" href="#help" hidefocus="true" unselectable="on">
<div role="img" id="menuitem-1092-iconEl" class="x-menu-item-icon " style=""></div>
<span id="menuitem-1092-textEl" class="x-menu-item-text" unselectable="on">Wiki search: Waitlist Queue</span>
<img id="menuitem-1092-arrowEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="">
</a>

The not-so-quick and dirty solution I have found is to update innerHTML using String.replace() (http://docs.sencha.com/extjs/4.2.2/#!/api/String-method-replace) method and MenuItem.update() (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.menu.Item-method-update). However, when I do that, MenuItem.setText() (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.menu.Item-method-setText) method stops working (MenuItem text doesn't change anymore) which creates another issue and forces me to update innerHTML for both href and link text. This way is not very flexible either.

Does anyone have any suggestions to this problem of how to nicely update Menu Item href so it works? Thanks in advance.

skirtle
6 Mar 2014, 5:48 PM
The link is the itemEl, not the el.


this.itemEl.set({
href: ...,
hrefTarget: ...
});

Take a look at the source for Ext.menu.Item, specifically the renderTpl and childEls.

You may find this background reading helpful for deciphering it all:

http://skirtlesden.com/articles/html-and-extjs-components

aleklados
6 Mar 2014, 11:17 PM
Thanks man! It works great.

Thanks for the good read too.