View Full Version : Ext.menu.Item and 508 compliance

2 Sep 2010, 6:20 AM
We are changing our code to make it more 508 compliant. Part of that involves running a tool (AccVerify) that tells us where there are images without alt tags. One of the areas that is reported is the menu items. The onrender method of Ext.menu.Item creates an Ext.XTemplate object and part of the params used to create the template builds an img tag. I'd like to add an alt attribute to that img element. I have tried overriding the Ext.menu.Item.onrender method and also tried creating my own Ext.Template and using that as the template for the menu item.

When I tried overriding the Ext.menu.Item.onrender method, it appeared that the original method was still being executed, not the method I defined as the override.

Ultimately, we just want all img elements to have an alt tag, even if that alt tag is ''. Is there a better way to accomplish this?

Here is the override code:

Ext.menu.Item.prototype.onrender =
function(container, position)
if (!this.itemTpl)
this.itemTpl = Ext.menu.Item.prototype.itemTpl =
new Ext.XTemplate
'<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',
'<tpl if="hrefTarget">',
' target="{hrefTarget}"',
'<img src="{icon}" class="x-menu-item-icon {iconCls}" alt=""/>',
'<span class="x-menu-item-text">{text}</span>',

var a = this.getTemplateArgs();
this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
this.iconEl = this.el.child('img.x-menu-item-icon');
this.textEl = this.el.child('.x-menu-item-text');
this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });
Ext.menu.Item.superclass.onRender.call(this, container, position);

2 Sep 2010, 6:27 AM
It's onRender and not onrender.

2 Sep 2010, 6:34 AM
Man, thats what I get for staring at code too long. Feeling pretty stupid now :)