在多列中渲染 GXT RadioGroup 或 CheckBoxGroup 的元素？

Question

我正在寻找一种在布局中渲染 GXT (GWT-Ext) RadioGroup 或 CheckBoxGroup 元素的方法，而不是单列 (Orientation.VERTICAL) 或单行 (Orientation.HORIZONTAL)。我看到 在 ExtJS 3.0 中，RadioGroups 和 CheckBoxGroups 很容易呈现在多列。但是，GXT 中似乎无法访问该配置。我在这里缺少什么吗？如果没有“简单”的解决方案，有没有办法为 RadioGroup 或 CheckBoxGroup 编写自定义渲染器？

Answer 1

com.extjs.gxt.ui.client.widget.form.CheckBoxGroup 继承自 com.extjs.gxt.ui.client.widget.form.MultiField ，其上写着API 页面说

在单行或单列中显示多个字段的字段。

所以我认为当谈到“简单”的解决方案时你运气不好。对于复选框，我认为您可以使用多个 CheckboxGroups 和 hbox/vbox 或列布局来伪造它，但我认为它不适用于多个 RadioGroup，因为分组 Radio 具有更多含义（就哪些无线电是互斥的而言）。

Answer 2

您可以为网格中的每一列实现 GridCellRenderer，其中每一列对应于一个单选组选项。这适用于 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

我知道这个问题已经有两年了，但我找到了解决方案:-)。
重点是将 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<复选框>班级。

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

那是你想要的吗？