Rendu des éléments d'un GXT RadioGroup ou CheckBoxGroup dans plusieurs colonnes?

Question

Je cherche un moyen de rendre les éléments d'un GXT (GWT-Ext) RadioGroup ou CheckBoxGroup dans une mise en page autre qu'une seule colonne (Orientation.VERTICAL) ou une seule ligne (Orientation.HORIZONTAL). Je vois que in ExtJS 3.0, RadioGroups and CheckBoxGroups are easily rendered in multiple columns. Cependant, la configuration ne semble pas être accessible dans GXT. Y a-t-il quelque chose qui me manque ici? S'il n'y a pas de solution "simple", existe-t-il un moyen d'écrire un rendu personnalisé pour un groupe Radio ou CheckBoxGroup?

Answer 1

com.extjs.gxt.ui.client.widget.form.CheckBoxGroup hérite de com.extjs.gxt.ui.client.widget.form.MultiField qui indique sur son API page dit

Un champ qui affiche plusieurs champs dans une seule rangée ou colonne.

Donc je pense que vous n'avez pas de chance quand il s'agit d'une solution «simple». Avec des cases à cocher, je pense que vous pourriez faire semblant avec plusieurs CheckboxGroups et hbox/vbox ou des mises en page de colonnes mais je ne pense pas que cela fonctionnerait avec plusieurs RadioGroup puisque le regroupement de Radios a plus de sens (en termes de exclusivité mutuelle).

Answer 2

Sans connaître la distribution finale des articles que vous cherchez, je ne sais pas si cela fonctionnera pour vous; Cependant, avez-vous pensé à ceci: Créer un grand groupe Radio ou CheckBoxGroup puis rendre les boutons radio individuels/cases à cocher invisibles comme nécessaire pour obtenir le modèle que vous voulez?

Si vous recherchez plusieurs colonnes, dites trois colonnes avec quatre boutons chacune, puis utilisez trois groupes de quatre boutons, côte à côte. Ensuite, écrivez un événement OnClick() ou OnSelect() pour chaque groupe (en supposant qu'il en existe un) pour gérer les trois groupes comme s'ils étaient un. Cela devrait être trivial pour les cases à cocher et un peu plus compliqué pour les radiobuttons puisque seul un radiobutton devrait être sélectionné à la fois.

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 3

Vous pouvez mettre en œuvre GridCellRenderer pour chaque colonne dans une grille, chaque colonne correspondant à un choix radiogroup. Cela fonctionnera pour 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 4

Je sais que cette question a 2 ans mais j'ai trouvé la solution :-). Le but est d'ajouter Radio et non RadioButton au panneau. Quelques exemples:

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

J'espère que cela aidera tout le monde :)

Answer 5

C'est par exemple simple constructeur de votre classe, qui devrait s'étend Multifield < checkbox> classe.

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

Est-ce que vous voulez?