Displaying GXT RadioGroup or CheckBoxGroup Elements in Multiple Columns?

Question

I am looking for a way to render GGT (GWT-Ext) RadioGroup or CheckBoxGroup elements 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 displayed in multiple columns . However, the configuration does not seem to be available in GXT. Is something missing here? If there is no “simple” solution, is there a way to write my own renderer for the RadioGroup or CheckBoxGroup?

Answer 1

com.extjs.gxt.ui.client.widget.form.CheckBoxGroupinherits from com.extjs.gxt.ui.client.widget.form.MultiFieldthat says on the 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 the help of checkboxes, I think you could fake it with several CheckboxGroups and hbox / vbox groups or columns, but I don't think that it will work with several RadioGroups, since the Radios grouping makes more sense (in terms of which they are mutual exclusive).

Answer 2

You can implement GridCellRendererfor each column in the grid, with each column corresponding to the choice of the radio group. 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;
    }
}

Answer 3

, , , ; , : RadioGroup CheckBoxGroup, / , , , ?

, , , . OnClick() OnSelect() ( , ) , . , .

 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 4

, 2 , :-). , Radio, RadioButton . :

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

, :)

Answer 5

, MultiField <CheckBox> .

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

?