Rendering the elements of a GXT RadioGroup or CheckBoxGroup in multiple columns?

Question

I am looking for a way to render the elements of a GXT (GWT-Ext) RadioGroup or CheckBoxGroup in a layout other than a single column (Orientation.VERTICAL) or a single row (Orientation.HORIZONTAL). I see that in ExtJS 3.0, RadioGroups and CheckBoxGroups are easily rendered in multiple columns. However, the configuration doesn't seem to be accessible in GXT. Is there something I'm missing here? If there is no "simple" solution, is there a way to write a custom renderer for a RadioGroup or CheckBoxGroup?

Answer 1

I know that question is 2 year old but I found solution :-). The point is to add Radio not the RadioButton to the panel. Some example:

    final RadioGroup outputType = new RadioGroup("outputType");

    Radio pdf = new Radio();
    Radio docx = new Radio();
    Radio rtf = new Radio();
    Radio ods = new Radio();

    outputType.add(pdf);
    outputType.add(docx);
    outputType.add(rtf);
    outputType.add(ods);

    //this goes
    panel.add(pdf);
    panel.add(docx);
    panel.add(rtf);
    panel.add(ods);

    //instead of this
    panel.add(outputType);

I hope it will help anyone :)

Answer 2

That's simple example of constructor of your class, that should extends MultiField< CheckBox > class.

public MyClass (String[] items, int columnsNumber) {
    setOrientation(Style.Orientation.HORIZONTAL);
    setSpacing(0);

    if (items != null) {
        final CheckBoxGroup[] columns = createColumns(columnsNumber);
        int i = 0;
        for (String item : items) {
            CheckBox check = new CheckBox();
            check.setBoxLabel(item);
            columns[i++ % columnsNumber].add(check);
            CLogger.info("Checkbox added for: " + item);
        }
        for (CheckBoxGroup column : columns) {
            add(column);
        }
    }
}

private CheckBoxGroup[] createColumns(int columnsNumber) {
    CheckBoxGroup[] columns = new CheckBoxGroup[columnsNumber];
    for (int i = 0; i < columns.length; i++) {
        columns[i] = new CheckBoxGroup();
        columns[i].setOrientation(Style.Orientation.VERTICAL);
        columns[i].setSpacing(0);
    }
    return columns;
}

Is that you want?

Answer 3

com.extjs.gxt.ui.client.widget.form.CheckBoxGroup inherits from com.extjs.gxt.ui.client.widget.form.MultiField which says on its API page says

A field that displays multiple fields in a single row or column.

So I think you're out of luck when it comes to a 'simple' solution. With checkboxes I think you could fake it with multiple CheckboxGroups and hbox/vbox or column layouts but I don't think it would work with multiple RadioGroup since grouping Radios has more meaning (in terms of which ones are mutual exclusive).

Answer 4

Without knowing the final distribution of items you are looking for I do not know if this will work for you; however, have you thought of this: Create a large RadioGroup or CheckBoxGroup then make individual radio buttons/checkboxes invisible as required to get the pattern you want?

If you are looking for multiple columns, say three colums with four buttons each, then use three groups of four buttons, side by side. Then write an OnClick() or OnSelect() event for each group (assuming one exists) to manage the three groups as if they were one. This should be trivial for checkboxes and a bit more complicated for radiobuttons since only one radiobutton should be selected at a time.

 R-1  R-2  R-3
+---++---++---+
| o || o || o |
| o || o || o |
| o || o || o |
| o || o || o |
+---++---++---+

// psudocode

form.onLoad()
{
   r1.selected = none;
   r2.selected = none;
   r3.selected = none;
   selection = none;
}

r1.OnClick()
{
   selection = r1.selected;
   r2.selected = none;
   r3.selected = none;
}

r2.OnClick()
{
   r1.selected = none;
   selection = r2.selected;
   r3.selected = none;
}

r3.OnClick()
{
   r1.selected = none;
   r2.selected = none;
   selection = r3.selected;
}

Answer 5

You could implement GridCellRenderer for each column in a grid, with each column corresponding to a radiogroup choice. This will work for GXT:

public class MyRenderer implements GridCellRenderer {
    public Radio render(ModelData model, String columnChoice, ColumnData config,
            int rowIndex, int colIndex, ListStore store, Grid grid) {

        Something something = ((Something) model).getSomething();
        Radio radio = new Radio();
        // we want one radioGroup per row:
        radio.setName("radioButton" + rowIndex);
        // set value depending on some property in the model corresponding to a
        // column
        if (something != null && something.getChoice().equals(columnChoice)) {
            radio.setValue(true);
        }
        return radio;
    }
}