Custom CheckBoxSelectionModel - change default icon

[grandanat]

Simplified problem:
I have a grid with a CheckBoxSelectionModel and i want to change default checkbox icons with my own, programmatically. Basically i think the best solution would be to extend gxt CheckBoxSelectionModel class and create a method setIcon(String imageUrl) that points to my image. I tried following code in my CustomCheckBoxSelectionModel ctor but it dowsn't work properly, it just append my image right to default image.

public CustomCheckBoxSelectionModel(String myImage) {
    super();
    this.getColumn().setRenderer(new GridCellRenderer<M>() {
      public String render(M model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<M> store,
          Grid<M> grid) {
        config.cellAttr = "rowspan='2'";
        config.style = "background-image: url(" + myImage + ");";
        return "<div class='x-grid3-row-checker'> </div>";
      }
    });
  }

I just want to replace this image :

.x-grid3-row-checker, .x-grid3-hd-checker {
    background-image:url(../images/default/grid/row-check-sprite.gif);
}

With my own one. Can anyone advice me how to approach the problem ?


Extended problem.
If i want to use a larger image then toggle selection area will have to be increased. Although size of this area is defined din css file. How do i change it dynamically in code ? I don;t want to override css, since i don;t want to apply this change to all grids that uses a checkbox selection model.
Another abandoned solution was to use a custom identifier instead of checker

void replaceDivs() {
    grid.addListener(Events.ViewReady, new Listener<ComponentEvent>() {
      @Override
      public void handleEvent(ComponentEvent be) {

        El header = grid.getView().getHeader().el();
        El headerBody = header.getChild(1);
        header.setInnerHtml(header.getInnerHtml().replace("-checker", "-mychecker"));
        El hdc = headerBody.child("div.x-grid3-hd-checker");
        if (hdc != null) {
          hdc.child("x-grid3-hd-checker");
          hdc.getId();
          hdc.getParent().setStyleName(hdc.getParent().getStyleName().replace("-checker", "-mychecker"));
          hdc.getChild(0).getParent().setStyleName(
              hdc.getChild(0).getParent().getStyleName().replace("-checker", "-mychecker"));
        }
      }
    });
  }

This solution worked better but is not really ok. i shouldn't have different different css classes for same thing(even icons are different).

[grandanat]

After one more day i've progressed but still not have a full working solution.
At this point all i have to change only background-position for "selected" image (checker-on)
So, i set my custom image to header( in constructor)

this.getColumn().setRenderer(new GridCellRenderer<M>() {
      public String render(M model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<M> store,
          Grid<M> grid) {
        config.cellAttr = "rowspan='2'";
        return "<div class='x-grid3-row-checker' style=' height: " + (imageSize + 2 * 2) + "px; background-image: " + imageURL + "; '>&#160;</div>";
      }
    });

I set my image to rows after ViewReady event

El hdc = grid.getView().getHeader().el().getChild(1).child("div.x-grid3-hd-checker");
    hdc.dom.getStyle().setBackgroundImage(imageURL);

, change checker size according to row height and place image in center to look nice

hdc.setStyleAttribute("height", this.rowHeight - 2);
    this.padding  = (this.rowHeight - 2 - this.imageSize)/2;
    hdc.setStyleAttribute("background-position", padding + "px " + padding + "px");

THE PROBLEM:
When a selection is changed, html structure is builded dynamically in code(in CheckBoxSelectionModel implementation)

private void setChecked(boolean checked) {
    if (grid.isViewReady()) {
      El hd = grid.getView().innerHd.child("div.x-grid3-hd-checker");
      if (hd != null) {
        hd.getParent().setStyleName("x-grid3-hd-checker-on", checked);
      }
    }
  }

After this call html element checker is replaced with checke checker-on. and the new background-position value is taken from css, to display checked image.

.x-grid3-row-selected .x-grid3-row-checker,.x-grid3-hd-checker-on .x-grid3-hd-checker,.x-grid3-row-checked .x-grid3-row-checker
  {
  background-position: -23px 2px;
}

Now the problem is that offset my image has other value (my images are larger) so i haven't access to this css checker-on background-position to change it. So i have to change it but i don't know how. Any advice will be more than welcome.

Another question would be if my approach is correct, to change css values programmatically in the code? Unfortunately I didn't a better solution.

[grandanat]

Adopted solution:

package mypackage.controls;

import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.StoreEvent;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;

public class CustomCheckBoxSelectionModel<M extends ModelData> extends CheckBoxSelectionModel<M> {

  protected String       imageURL    = "url(\"/res/images/selectColumnModel.gif\")";
  protected int          imageSize   = 24;
  protected int          padding     = 2;
  protected int          leftPadding = padding;
  protected int          rowHeight   = imageSize + padding * 2;

  public CustomCheckBoxSelectionModel(String image, int size) {
    super();
    this.imageURL = image;
    this.imageSize = size;
    this.rowHeight = this.imageSize + padding * 2;
    initConfig();
  }

  public CustomCheckBoxSelectionModel() {
    super();
    initConfig();
  }

  private void initConfig() {
    this.getColumn().setId("checker");
    this.getColumn().setWidth(rowHeight + 2);
    this.getColumn().setRenderer(new GridCellRenderer<M>() {
      public String render(M model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<M> store,
          Grid<M> grid) {
        config.cellAttr = "rowspan='2'";
        return "<div class='x-grid3-row-checker' style=' height: " + rowHeight + "px; background-image: " + imageURL
            + "; '> </div>";
      }
    });
  }

  @Override
  public void init(Component component) {
    super.init(component);
    modifyElement();
  }

  private void modifyElement() {
    grid.addListener(Events.ViewReady, new Listener<ComponentEvent>() {
      @Override
      public void handleEvent(ComponentEvent be) {
        replaceBackgroundImage();
      }
    });
  }

  void replaceBackgroundImage() {

    El hdc = grid.getView().getHeader().el().getChild(1).child("div.x-grid3-hd-checker");
    hdc.dom.getStyle().setBackgroundImage(imageURL);
    hdc.setStyleAttribute("height", this.rowHeight - 2);
    hdc.setStyleAttribute("background-position", padding + "px " + padding + "px");
  }

  @Override
  protected void onSelectChange(M model, boolean select) {
    super.onSelectChange(model, select);

    if (grid.isViewReady()) {
      boolean change = getSelection().size() == grid.getStore().getCount();
      changeHeaderOffset(change);
      changeRowOffset(grid.getStore().indexOf(model), change);
    }
  }

  @Override
  protected void onClear(StoreEvent<M> se) {
    super.onClear(se);
    changeHeaderOffset(false);
  }

  private void changeHeaderOffset(boolean select) {
    if (select/* && leftPadding == padding */) {
      leftPadding = padding - 12 - imageSize;
    } else/* if(leftPadding != padding) */{
      leftPadding = padding;
    }

    El hdc = grid.getView().getHeader().el().getChild(1).child("div.x-grid3-hd-checker");
    hdc.setStyleAttribute("background-position", leftPadding + "px " + padding + "px");
  }

  private void changeRowOffset(int index, boolean select) {

    El hdr = El.fly(grid.getView().getRow(index)).child("div.x-grid3-row-checker");
    int itemPadding = padding;
    if (isSelected(grid.getStore().getAt(index))) {
      itemPadding = padding - 12 - imageSize;
    }

    hdr.setStyleAttribute("background-position", itemPadding + "px " + padding + "px");

  }

}

Please feel free to make any comments or suggestions.