menuButton with icon

[la123]

Hi,

I am trying to create a menu with icon (in smartGWT) - and in fact received only a menu with title. For example, here I get no icon near "File":

isc.Menu.create({
    ID: "menu",
    data: [
        {title: "New"},
        {title: "Open"},
    ]
});

isc.MenuButton.create({
    ID: "menuButton",
    title: "File",
    menu: menu,
    icon: "icons/16/document_plain_new.png"
});

thank you

[mike.art1]

The code you have shown is using SmartClient not SmartGWT. If you are using SmartGWT have a look at this showcase sample.

[la123]

thank you for reply

I tried the code I wrote in smartClient feature explorer.
The menuButton.setIcon(...) doesnt work in both smartClient and smartGWT
Do you have any clue?

[Isomorphic]

Use Firebug to see the URL that is actually being requested for the icon. Search the SmartClient Reference for "scimgurl" to understand how the path to the icon is being interpreted.

[la123]

The only image I see in menu button in Firebug HTML tab is for menu arrow. Besides that, in Firebug Net tab I don't see a request for image that I add on File menu.

As I understand, the MenuButton.setIcon doesn't add an icon.

Here is the HTML source code of my example with File menu that I wrote in my first post:

<table height="100%" cellspacing="0" cellpadding="0" width="100%" style="overflow: hidden; table-layout: fixed;"><tbody><tr><td nowrap="true" align="center" valign="center" onfocus="menuButton.$47()" tabindex="-1" style="padding-top: 0px; padding-bottom: 0px;" class="menuButton"><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td nowrap="true" align="left" style="border: 0px none ; margin: 0px; padding: 0px; background-image: none;" class="menuButton">File</td><td style="font-size: 1px; padding-left: 6px; width: 18px;"><img height="8" border="0" align="absmiddle" width="12" suppress="TRUE" eventpart="icon" style="vertical-align: middle;" name="isc_3RmenuButton$4u" src="http://www.smartclient.com/docs/6.5.1/a/skins/TreeFrog/images/Menu/menu_button.png"/></td></tr></tbody></table></td></tr></tbody></table>

thanks

[Isomorphic]

Yes, the MenuButton uses button.icon internally to show the down arrow. If you want a second icon, include it as part of the title by calling isc.Canvas.imgHTML() to generate HTML for the icon part.

[la123]

thank you, it answers the question

[Blama]

Hi Isomorphic,

is this still the suggested way of doing this (in 12.0p)? I did not find anything else in the docs or the samples, but really can't think it is still this way, as this approach has severe probleme with _Focus, _Over, _Active etc.

If it is the only way, I'd suggest this as an enhancement.

Thank you & Best regards
Blama

[Isomorphic]

There's also an IconButton class, which in horizontal orientation might be closer to what you want.