Question

我正在寻找一种方法来在除单列（Orientation.VERTICAL）或单行（Orientation.HORIZONTAL）之外的布局中呈现GXT（GWT-Ext）RadioGroup或CheckBoxGroup的元素。我看到了in ExtJS 3.0, RadioGroups and CheckBoxGroups are easily rendered in multiple columns。但是，配置似乎无法在GXT中访问。这里有什么我想念的吗？如果没有“简单”的解决方案，有没有办法为RadioGroup或CheckBoxGroup编写自定义渲染器？

Answer 1

com.extjs.gxt.ui.client.widget.form.CheckBoxGroup继承自com.extjs.gxt.ui.client.widget.form.MultiField，API page上写着

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

所以我认为你谈到一个'简单'的解决方案时运气不好。使用复选框，我认为你可以使用多个CheckboxGroups和hbox / vbox或列布局伪装它，但我认为它不适用于多个RadioGroup，因为分组Radios具有更多含义（就哪些是互斥的）。

Answer 2

您可以为网格中的每一列实现GridCellRenderer，每列对应一个radiogroup选项。这适用于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＆lt; CheckBox＆gt;类。

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

你想要的吗？

在多列中呈现GXT RadioGroup或CheckBoxGroup的元素？

5 个答案: