4

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?

4

5 回答 5

1

您可以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;
    }
}
于 2010-01-23T23:36:34.307 回答
1

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

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

因此，我认为在“简单”解决方案方面您不走运。使用复选框，我认为您可以使用多个 CheckboxGroups 和 hbox/vbox 或列布局来伪造它，但我认为它不适用于多个 RadioGroup，因为分组 Radios 具有更多意义（就哪些是互斥的而言）。

于 2010-01-09T20:38:45.807 回答
0

在不知道您要查找的项目的最终分配的情况下，我不知道这是否对您有用；但是，您是否想过：创建一个大型 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;
}
于 2010-01-14T23:13:19.870 回答
0

我知道这个问题已经 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);

我希望它会帮助任何人:)

于 2011-02-10T21:13:49.767 回答
0

这是您的类的构造函数的简单示例，它应该扩展 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;
}

那是你想要的吗？

于 2011-10-18T08:27:45.367 回答