Ext GWT在鼠标悬停时更改ContentPanel背景颜色

Question

In my page I have a Gxt ContentPanel with a white background. However, when the user mouses over the Header of the ContentPanel, I would like the background to change colors.

I tried achieving this by using the protected addStyleOnOver method of Gxt Component, but it doesn't have any effect. Is there anything else I need to do to use that methods (I'm already sinking the ONMOUSEOVER and ONMOUSEOUT events), or a better way to change the background?

Answer 1

you can do this using below code its working

    ContentPanel contentPanel = new ContentPanel();
    contentPanel.setStyleName("background");

and write below code in your css

   .background:hover .x-panel-body {background-color: red !important;}

Answer 2

i'm not sure if this works, but you can test it...

final ContentPanel test = new ContentPanel();
test.getHeader().addListener(Events.OnMouseOver, new Listener<BaseEvent>() {
    @Override
    public void handleEvent(BaseEvent be) {
        test.getHeader().setStyleName("your_new_style");
        // or test.setStyleName("your_new_style");
    }
});

Answer 3

You could simply add a style to the header, then add some css to change the color.

test.getHeader().addStyleName("my_style")

# css
my_style:hover { background-color: yellow; }

This is a bit trickier if you want to change the bg of the whole ContentPanel during onMouseOver of the header, in which case, add the mouse over event to the header where handle event adds style to the content panel (or content panel body depending on what you want), then add the appropriate styles to you css.

# css
my_style { background-color: yellow; }