Визуализация элементов GXT RadioGroup или CheckBoxGroup в нескольких столбцах?

Question

Я ищу способ визуализации элементов GXT (GWT-Ext) RadioGroup или CheckBoxGroup в макете, отличном от одного столбца (Orientation.VERTICAL) или отдельной строки (Orientation.HORIZONTAL). Я вижу, что в ExtJS 3.0, RadioGroups и CheckBoxGroups легко отображаются в нескольких столбцах . Тем не менее, конфигурация, кажется, не доступна в GXT. Есть что-то, чего я здесь не хватает? Если не существует «простого» решения, есть ли способ написать собственный рендер для RadioGroup или CheckBoxGroup?

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

Answer 2

com.extjs.gxt.ui.client.widget.form.CheckBoxGroup наследуется от com.extjs.gxt.ui.client.widget.form.MultiField, который говорит на своей странице API говорит

Поле, отображающее несколько полей в одной строке или столбце.

Так что я думаю, что вам не повезло, когда дело доходит до «простого» решения. С флажками я думаю, что вы могли бы подделать его с несколькими CheckboxGroups и hbox / vbox или макетами столбцов, но я не думаю, что это будет работать с несколькими RadioGroup, так как группировка Radios имеет большее значение (с точки зрения того, какие из них взаимоисключающие).

Answer 3

Это простой пример конструктора вашего класса, который должен расширять класс 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;
}

Это ты хочешь?

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

Не зная окончательного распределения предметов, которые вы ищете, я не знаю, сработает ли это для вас; однако, задумывались ли вы об этом: создайте большую 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;
}