Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#7392 closed enhancement (fixed)

MenuItem: add option to change iconClass dynamically.

Reported by: scott.a.jenkins Owned by: anonymous
Priority: high Milestone: 1.2
Component: Dijit Version: 1.1.1
Keywords: dijit.menuItem, css, rendering, appearance Cc:
Blocked By: Blocking:

Description

In IE7, the icon class renders incorrectly, repeating a couple of times.

See attached screen snippet comparing FF3 and IE7 rendering of the identical web page.

See attached file for exact source of test case.

See attached file for exact image resource being used, which is a modified version of one of the images in the Tundra theme.

Attachments (3)

comparison.ping.png (76.0 KB) - added by scott.a.jenkins 11 years ago.
testpage.htm (2.5 KB) - added by scott.a.jenkins 11 years ago.
menuChoiceSelected.png (1.3 KB) - added by scott.a.jenkins 11 years ago.

Download all attachments as: .zip

Change History (11)

Changed 11 years ago by scott.a.jenkins

Attachment: comparison.ping.png added

Changed 11 years ago by scott.a.jenkins

Attachment: testpage.htm added

Changed 11 years ago by scott.a.jenkins

Attachment: menuChoiceSelected.png added

comment:1 Changed 11 years ago by bill

Component: GeneralDijit
Resolution: invalid
Status: newclosed

I'm not sure why your testcase varies by browser, but you should be specifying the icon via the iconClass parameter, not the class parameter, like:

<div dojotype="dijit.MenuItem" label="Medium" iconClass="menuChoiceSelected"></div>

comment:2 Changed 11 years ago by scott.a.jenkins

Resolution: invalid
Status: closedreopened

Thank you for your feedback; I didn't realize that was the proper method, after I went through the API looking for a dynamic method to set the icon.

I believe we need a mechanism to set icon class dynamically. My particular use case (as the test case when I reported this as a bug shows) is to show the selected item from a group of items, but I am sure there are many others.

I have implemented and tested in FF3 and IE7 the following code (which is completely trivial), and which appears to work correctly. I am suggesting adding the setIconClass method to dijit.MenuItem? (and possibly other dijits using icon classes).

Suggest the help text be:

Set current icon class on the MenuItem?. If an empty string is given as the argument, will remove the current icon class.

<javascript> dojo.require('dijit.Menu');

dojo.provide('mojo.MenuItem?');

dojo.declare('mojo.MenuItem?', [ dijit.MenuItem? ], {

setIconClass: function(newIconClass) {

if (this.iconClass) {

dojo.removeClass(this.iconNode, this.iconClass);

}

this.iconClass = newIconClass
;

if (this.iconClass) {

dojo.addClass(this.iconNode, this.iconClass);

}

}

}); </javascript>

comment:3 Changed 11 years ago by scott.a.jenkins

I would change the category from defect to enhancement request, or close and create another, but I don't seem to have either of those options as an end user.

comment:4 Changed 11 years ago by bill

Milestone: tbd1.3
Summary: Icon class for MenuItem renders incorrectly, IE7MenuItem: add option to change iconClass dynamically.
Type: defectenhancement

OK. Yah, could add special handlers for attr('iconClass', ...) to MenuItem? (attr() is a new method in trunk) although would be nice to have some magic so those aren't necessary, like specifying dojoClass='iconClass' in the template. Will think about it.

comment:5 Changed 11 years ago by scott.a.jenkins

I realize that attr() exists; what is needed if this will be the primary API is a documented list of attributes which can be set effectively at each stage of the widget lifecycle, as part of the standard documentation for a widget.

The documentation on attr() also suggests it is for use only on domNodes, not widgets.

While it is relatively clear to programmers who will write custom widgets that widgets have domNode members, that may not be as clear to programmers who just want to use the widgets' public APIs.

Thank you for putting this on the feature request list.

comment:6 Changed 11 years ago by bill

I meant Widget.attr(), not dojo.attr().

I agree we need better documentation; the list of attributes for each widget is available but it's unclear that for example something like "id" can only be set on initialization and not later changed.

comment:7 Changed 11 years ago by bill

Note to self: maybe dojoAttachPoint="iconNode" should automatically "bind" Widget.iconClass to iconNode.className (icon is just an example word, could be anything).

comment:8 Changed 11 years ago by bill

Milestone: 1.31.2
Resolution: fixed
Status: reopenedclosed

Implemented in [14920].

FYI, the list of attributes you can changes via MenuItem.attr() is the same as the list of parameters for the widget, minus a few read-only things like id. The list of parameters is available on api.dojooolkit.org.

Note: See TracTickets for help on using tickets.