2013-06-26 29 views
0

我試圖做一個組合框與選項類別在GXT 3GXT的組合框不可選擇的類別

我可以用一個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> 

正如你可以在this fiddle看到,它產生不可選擇類別組合框。我正在嘗試與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()<option>標籤的屬性name,但它符合我的需要;)

回答

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

我最終選擇了使用DOM API做我自己的實現;) –

+0

謝謝!這只是我想要的 –