0

GXT 3でオプションとカテゴリを使用して ComboBox を実行しようとしています。

を使用ComboBoxCellして、オプションとカテゴリを異なる表示にすることができます。

問題 : カテゴリを選択できないようにする必要があります(HTML タグのように<optgroup>)。

これは単純な古い HTML コンボボックス ( <select> tag)です。

HTML コード:

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <select>
      <optgroup label="category 1">
        <option name="option1">Option 1</option>
        <option name="option2">Option 2</option>
        <option name="option3">Option 3</option>
      </optgroup>
      <optgroup label="category 2">
        <option name="option4">Option 4</option>
        <option name="option5">Option 5</option>
        <option name="option6">Option 6</option>
      </optgroup>
    </select>
  </body>
</html>

この fiddleでわかるように、選択できないカテゴリを持つ ComboBox が生成されます。私はGXTで同等のことをしようとしています。

何か案が？

編集：

私は最終的に自分の実装を行いました:

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.UIObject;
import com.google.gwt.user.client.ui.Widget;

import java.util.Collection;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;

public class Select<T>  extends Widget {

  private static final String TAG_OPTGROUP = "optgroup";
  private static final String ATTR_NAME = "name";
  private static final String PROPERTY_SELECTED = "selected";

  private Element select;
  private Map<Element, T> mapElement;

  public Select(boolean multiple){
    this.mapElement=new HashMap<Element, T>();
    this.select = DOM.createSelect(multiple);
    this.setElement(this.select);
  }

  public Select(){
    this(false);
  }

  public OptGroup addGroup(String displayName){
    OptGroup optGroup=new OptGroup(displayName);
    this.select.appendChild(optGroup.getElement());
    return optGroup;
  }

  public void addOption(T t,String displayName){
    Element option=DOM.createOption();
    option.setAttribute(ATTR_NAME,t.toString());
    option.setInnerText(displayName);
    this.select.appendChild(option);
    this.mapElement.put(option,t);
  }

  public T getSelectedValue(){
    for(Map.Entry<Element,T> entry:mapElement.entrySet()){
      if(entry.getKey().getPropertyBoolean(PROPERTY_SELECTED)){
        return entry.getValue();
      }
    }
    return null;
  }

  public Collection<T> getSelectedValues(){
    Collection<T> result=new HashSet<T>();
    for(Map.Entry<Element,T> entry: mapElement.entrySet()){
      if(entry.getKey().getPropertyBoolean(PROPERTY_SELECTED)){
        result.add(entry.getValue());
      }
    }
    return result;
  }

  public class OptGroup extends UIObject {
    private static final String ATTR_LABEL="label";

    private String name;
    private Element element;

    private OptGroup(String name) {
      this.name = name;
      this.element = DOM.createElement(TAG_OPTGROUP);
      this.element.setAttribute(ATTR_LABEL,name);
      this.setElement(this.element);
    }

    public String getName() {
      return name;
    }

    public void addOption(T t,String displayName){
      Element option=DOM.createOption();
      option.setAttribute(ATTR_NAME,t.toString());
      option.setInnerText(displayName);
      this.element.appendChild(option);
      mapElement.put(option,t);
    }
  }
}

これは、タグtoString()の属性に使用するので完璧ですが、私のニーズを満たしています;)name<option>

4

2 に答える 2

2

gwt リスト ボックスは optgroup をサポートしていないようです。DOM API を使用する必要があります。このようなことができます

List<String> options = new ArrayList<String>();
options.add("Option 1");
options.add("Option 2");
options.add("Option 3");

ListBox combo = new ListBox();
SelectElement selectElm = combo.getElement().cast();
OptGroupElement groupElement =Document.get().createOptGroupElement();
groupElement.setLabel("category 1");

for (String option : options) 
{
    OptionElement optElement = Document.get().createOptionElement();
    optElement.setInnerText(option.getName());
    groupElement.appendChild(optElement);
}

selectElm.appendChild(groupElement);
于 2013-06-26T13:33:39.763 に答える
1

GWTでは、ここで説明されているように行うことができます

于 2013-06-26T13:36:48.097 に答える