MouseOver User Feedback on Accordion

[empl1_foo-inc]

We end up putting our own mouseOver on the accordion. It would be nice if this was an option on an accordion.

Here’s what we do:

package test.client;


import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.AccordionLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.RootPanel;

public class test implements EntryPoint {

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());

LayoutContainer main = new LayoutContainer();
main.setLayout(new BorderLayout());

ContentPanel north = new ContentPanel();
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();
ContentPanel east = new ContentPanel();
ContentPanel south = new ContentPanel();

BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
100);
northData.setCollapsible(false);


BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
westData.setSplit(true);
westData.setCollapsible(true);

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);

BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 200);
eastData.setSplit(true);
eastData.setCollapsible(true);

BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH,
100);
southData.setSplit(true);
southData.setCollapsible(true);

main.add(north, northData);
main.add(west, westData);
main.add(center, centerData);
main.add(east, eastData);
main.add(south, southData);

ContentPanel accordion = new ContentPanel();
accordion.setHeaderVisible(false);


AccordionLayout accordionLayout = new AccordionLayout();
accordionLayout.setFill(true);
accordion.setLayout(accordionLayout);

ContentPanel accordionchild1 = new ContentPanel();
accordionchild1.setHeading("Accordion1");
accordionchild1.setAnimCollapse(true);
accordionchild1.setExpanded(false);
accordionchild1.setLayout(new FitLayout());
accordionchild1.addText("Some Text");


ContentPanel accordionchild2 = new ContentPanel();
accordionchild2.setHeading("Accordion2");
accordionchild2.setLayout(new FitLayout());
accordionchild2.addText("Some Text");

ContentPanel accordionchild3 = new ContentPanel();
accordionchild3.setHeading("Accordion3");
accordionchild3.setAnimCollapse(true);
accordionchild3.setExpanded(false);
accordionchild3.setLayout(new FitLayout());
accordionchild3.addText("Some Text");

accordion.add(accordionchild1);
accordion.add(accordionchild2);
accordion.add(accordionchild3);

west.setHeading("No MouseOver");
west.setLayout(new FitLayout());
west.add(accordion);


ContentPanel accordionEast = new ContentPanel();
accordionEast.setHeaderVisible(false);


AccordionLayout accordionLayoutEast = new AccordionLayout();
accordionLayoutEast.setFill(true);
accordionEast.setLayout(accordionLayoutEast);

ContentPanel accordionEastChild1 = new ContentPanel();
accordionEastChild1.setHeading("Accordion1");
accordionEastChild1.setExpanded(false);
accordionEastChild1.setLayout(new FitLayout());
accordionEastChild1.addText("Some Text");
setAccordionChildPanelProps(accordionEastChild1);

ContentPanel accordionEastChild2 = new ContentPanel();
accordionEastChild2.setHeading("Accordion2");
accordionEastChild2.setAnimCollapse(true);
accordionEastChild2.setExpanded(false);
accordionEastChild2.setLayout(new FitLayout());
accordionEastChild2.addText("Some Text");
setAccordionChildPanelProps(accordionEastChild2);

ContentPanel accordionEastChild3 = new ContentPanel();
accordionEastChild3.setHeading("Accordion3");
accordionEastChild3.setAnimCollapse(true);
accordionEastChild3.setExpanded(false);
accordionEastChild3.setLayout(new FitLayout());
accordionEastChild3.addText("Some Text");
setAccordionChildPanelProps(accordionEastChild3);


accordionEast.add(accordionEastChild1);
accordionEast.add(accordionEastChild2);
accordionEast.add(accordionEastChild3);

east.setHeading("MouseOver");
east.setLayout(new FitLayout());
east.add(accordionEast);

viewport.add(main);
RootPanel.get().add(viewport);
}

private void setAccordionChildPanelProps(final ContentPanel childPanel) {


//On mouseOver - highlight header
childPanel.sinkEvents(Event.ONMOUSEOVER);
childPanel.addListener(Event.ONMOUSEOVER, new Listener<ComponentEvent>() {
public void handleEvent(final ComponentEvent be) {

// If panel is expanded, don't change class
if (!childPanel.isExpanded()) {
childPanel.addStyleName("accordion-item-over");
}
}
});

// On mouseOut - turn highlight off
childPanel.sinkEvents(Event.ONMOUSEOUT);
childPanel.addListener(Event.ONMOUSEOUT, new Listener<ComponentEvent>() {
public void handleEvent(final ComponentEvent be) {

// If panel is expanded, leave the class on
if (!childPanel.isExpanded()) {
childPanel.removeStyleName("accordion-item-over");
}
}
});

// On collapse, turn off highlight
childPanel.sinkEvents(Events.Collapse);
childPanel.addListener(Events.Collapse, new Listener<ComponentEvent>() {
public void handleEvent(final ComponentEvent be) {

// If panel is expanded, leave the class on
childPanel.removeStyleName("accordion-item-over");
childPanel.removeStyleName("accordion-expanded");
}
});

// On expand, turn on expaned highlight
childPanel.sinkEvents(Events.Expand);
childPanel.addListener(Events.Expand, new Listener<ComponentEvent>() {
public void handleEvent(final ComponentEvent be) {

childPanel.addStyleName("accordion-expanded");

}
});
}}


**************** CSS *******************
.accordion-item-over .x-accordion-hd {
cursor: pointer;
background-image: none !important;
background-color: #c9dbf9;
}
.accordion-expanded .x-accordion-hd {
cursor: pointer;
background-image: none !important;
background-color: #a0bae8;
}

[sven]

Component.addStyleOnOver