problems with icons

[rollo]

Hello,

i have a problem with the icons of ContentPanel and TabItem.


item2 = new TabItem();
item2.setText("Test2");
item2.setIconStyle("icon-tabs");
item2.setScrollMode(Scroll.AUTO);
testContent = new ContentPanel();
testContent.collapsible = true;
testContent.setHeading("FX Demo");
testContent.setIconStyle("icon-text");I have set the IconStyle, but they weren't or wrong displayed. Can anybody help me?

[darrellmeyer]

"icon-tabs" is defined in the resources module. So you either need to have your own style and icon or inherit the resources module.

[rollo]

Ok, thanks.

But what is the problem with ContentPanel?

[check_writer]

I have a follow up question to this. Is there a way to specify icons without having to put an entry in the CSS? I.e. at runtime?

thanks

[darrellmeyer]

rollo
There is no problem with ContentPanel. This is what the icon will look like with an invalid style.

check_writer
setIconStyle will support image paths as well as css style names. With this, you can pass a image path at runtime. This change will be included in 1.0.

[andrey]

I have an application that I am porting from MyGWT 5.2 to GXT beta2. The application has trees, tabs, buttons, tool items, and some panels that all refer to styles. After I switched to GXT beta2, all of my buttons and tool items (which wrap buttons) are no longer showing the icon (I'm using button.setIconStyle("icon-name")). However, all of the tabs and customized tree node icons are displaying correctly. Also, the background styles associated with the panels are no longer working. All of the application styles mentioned above are contained in a single style-sheet. I tried creating a little stand-alone EntryPoint test program and I get the same result with buttons. Does anyone have any suggestions as to what could be going wrong or how I should approach debugging this?

Thanks in advance.

- Andre

[darrellmeyer]

Make sure your style looks like this:


.icon-app-side {
background-image: url(images/icons/application_side_list.png) !important;
}

I would highly recommend Firebug for Firefox. With it, you can confirm your styles are being loaded, the icon style is being applied to the element, and ensure the icon style is not being overridden.

[andrey]

Thanks Darrell! Adding the "!important" did the trick (although I'm still not quite sure why :">). I will checkout firebug.

- Andre

[gslender]

Darrell, I also had the same problem (that I ignored for the time being) with the icons not showing on content panel - the !important fix solved it - can you explain why this changed in ExtGWT ??

[darrellmeyer]

With MyGWT, most of the icon styles were placed on a individual element that was used for the icon. With the Ext markup, the icon style is of placed on the element containing the text, not a separate element. Adding !important tell the browser that the style should not be overridden by any other conflicting values which is the case with the Ext style for icons.

[gslender]

.... migth be worth adding that info in the Javadocs... so that users don't have to consult a userguide to understand how to add icons to the widgets....

[check_writer]

I have a follow up question to this. Is there a way to specify icons without having to put an entry in the CSS? I.e. at runtime?

thanks

Hello, I'm checking to see if this feature is now implemented, such that I can do the following getHeader().setIconStyle("images/icons/16/myicon.png");

I tried this without any luck, is it now possible to specify the image path of an icon using setIconStyle() if so, what is the format?

thanks,
check_writer.

[gslender]

no - you must use css and setIconStyle where appropriate. you cannot use a path as you have tried.

cheers,
grant

[check_writer]

Grant thanks, but I think it's only natural that one may not know what an icon will be OR may change at runtime. If I wanted such functionality, how would you suggest I extend GXT to do so?

Also, java programmers are not always web centric, so a method like setIcon(String path) seems very natural to have.

check_writer

-------------------
no - you must use css and setIconStyle where appropriate. you cannot use a path as you have tried.

cheers,
grant

--------------------

[abickford]

In Header.java (used in the header of ContentPanel) iconBtn has it's width set to 20px on line 183, yet the icons are only 16px. I believe this is causing the clipping issue in the OP's screenshot. This member is private w/no way to access it to change this behavior. Is this intentional?

This is using GWT 1.5.2 and GXT 1.1.1. I've included the Resources module which does indeed have the rule:

.icon-app-side {
background-image: url(images/icons/application_side_list.png) !important;
}

[villemustonen]

Grant thanks, but I think it's only natural that one may not know what an icon will be OR may change at runtime. If I wanted such functionality, how would you suggest I extend GXT to do so?

I would suggest that you have all the possible icons in the CSS, and change the CSS at runtime. Isn't this basically the same as changing the icon at runtime?