Ext GWT меняет цвет фона ContentPanel при наведении курсора

Question

На моей странице у меня есть Gxt ContentPanel с белым фоном. Однако, когда пользователь наводит курсор на заголовок ContentPanel, я бы хотел, чтобы фон изменил цвета.

Я пытался добиться этого с помощью защищенного метода addStyleOnOver компонента Gxt, но он не дал никакого эффекта. Что еще мне нужно сделать, чтобы использовать эти методы (я уже опускаю события ONMOUSEOVER и ONMOUSEOUT), или лучший способ изменить фон?

Answer 1

Вы можете сделать это, используя приведенный ниже код, работающий

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

и написать следующий код в вашем css

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

Answer 2

Вы можете просто добавить стиль к заголовку, а затем добавить несколько CSS для изменения цвета.

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

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

Это немного сложнее, если вы хотите изменить bg всего ContentPanel во время onMouseOver иззаголовок, и в этом случае добавьте событие мыши над заголовком, где дескриптор события добавляет стиль на панель содержимого (или тело панели содержимого в зависимости от того, что вы хотите), затем добавьте соответствующие стили для вас css.

# css
my_style { background-color: yellow; }

Answer 3

Я не уверен, что это работает, но вы можете проверить это ...

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");
    }
});