Header select all CheckBox issue

[fcurran]

Hello,


I have a grid with several columns that represent true/false values. These need to be displayed as CheckBoxes in each column, for each row. This is easy enough using the provided CheckColumnConfig.
The next requirement is to have a CheckBox in each corresponding column header that will allow the user to check all CheckBoxes in that column.
I've attempted going about this two separate ways, but have been unable to get it to work.
The first way was to just add a CheckBox field to the ColumnConfig's header:

   CheckColumnConfig columnConfig = new CheckColumnConfig();
   columnConfig.setId("isNew");
   columnConfig.setHeader("New");
   columnConfig.setWidth(75);
   columnConfig.setSortable(false);
   final HorizontalPanel headerPanel = new HorizontalPanel();
   headerPanel.setSpacing(3);
   headerPanel.setVerticalAlign(VerticalAlignment.MIDDLE);


   //header checkbox
   final CheckBox selectAllCheckBox = new CheckBox();
   selectAllCheckBox.addListener(Events.OnClick, new Listener<FieldEvent>() {
       @Override
       public void handleEvent(final FieldEvent baseEvent) {
           for (ModelData row : grid.getStore().getModels()) {
               row.set(columnConfig.getId(), selectAllCheckBox.getValue());
           }
       }
   });
   selectAllCheckBox.addListener(Events.Change, new Listener<FieldEvent>() {
       @Override
       public void handleEvent(final FieldEvent fe) {
              //this happens twice, OnClick and OnBlur (I found this out while debugging, 
              //but not sure where the event is coming from), so checks and unchecks every time
              GWT.log("Changing value to:" + fe.getValue());
       }
   });
   headerPanel.add(selectAllCheckBox);
   Text textForHeader = new Text(columnConfig.getHeader());
   headerPanel.add(textForHeader);


   columnConfig.setWidget(headerPanel, columnConfig.getHeader());*/

As I note in the comment in the above block, for some reason the change event on the CheckBox is fired twice (checked, unchecked instantly). I can't seem to figure out a proper way to stop this second invalid event, as I'm not sure where the OnBlur is coming from.
The second attempt involved me copying some of the techniques used in the CheckBoxSelectionModel.

        CheckColumnConfig() columnConfig= new CheckColumnConfig();
        columnConfig.setId("isNew");
        columnConfig.setHeader("New");
        columnConfig.setWidth(75);
        columnConfig.setSortable(false);
        columnConfig.setId("checker");
        columnConfig.setResizable(true);
        columnConfig.setFixed(false);
        columnConfig.setMenuDisabled(true);
        columnConfig.setDataIndex("");
        HorizontalPanel headerPanel = new HorizontalPanel();
        Text textForHeader = new Text(columnConfig.getHeader());
        textForHeader.setStyleAttribute("font-size", "11px");
        textForHeader.setStyleAttribute("padding", "4px");
        textForHeader.setStyleAttribute("padding-left", "20px");
        headerPanel.add(textForHeader);
        columnConfig.setWidget(headerPanel, columnConfig.getHeader());
        return columnConfig;

With this attempt, I get what some of you may expect, as I found this post on the forum: http://www.sencha.com/forum/showthre...header-problem
This pretty much illustrates the problem, so I don't think I need to post my own screen shot. Two checkboxes appear when you make the column wider (even when you don't use the CheckBoxSelectionModel as the linked forum post does). After getting that far with this attempt, I decided that I don't like this solution that much. I'm not very experienced with CSS, so please be kind, but this solution sets the id as "checker", which also seems to be what creates the CheckBox in the column header itself. However, for the binding for this column in the grid's model data, we also use the id, and having it be checker doesn't seem to work for me. I would much rather have the first solution work, but I couldn't figure out the events properly.
I've been fooling with this for a while now, so any help would be greatly appreciated.


Thanks,
Frank

[icfantv]

UPDATE:

Something I hadn't considered. If you're using GXT 2.x, your question should be posted in that relevant forum as this is a 3.x forum.

The first thing I would suggest is to use all GXT widgets and methods if possible. It looks like you're using HorizontalPanel and given that I don't even see an addListener on the GXT CheckBox API, I think this means you're also using GWT's CheckBox widget. If this is by design, your post should probably go in the GWT forum and not Sencha's.

If, however, this is in error and you meant to be using GXT, you'll want, at the very least, to be using CSSFloatLayoutContainer, or for more control HorizontalLayoutContainer or HBoxLayoutContainer (see the explorer demo for examples). Secondly, if you want to monitor for changes, you should be using CheckBox.addValueChangeHandler to detect changes in your widget's selection state.

Explorer Demo: http://www.sencha.com/examples