EXT-GWT（GXT）Comboboxのdisplayfieldのアイコンとテキストを表示

Question

ext-gwtsのコンボボー内の表示フィールドにアイコンとテキストを表示する方法を知っている人はいますか？私はすべてを試みた。

この例の第3のComboBox（klick me）には、選択可能な値のアイコンとテキストがあります。これはサンプルテンプレートでは問題ありませんでした。しかし、私は選択された値のアイコンとテキストも表示したい。どうすればこれを管理できますか？

アイコンとテキストのModelクラスがあります。

public class Language extends DbBaseObjectModel { 
private static final long serialVersionUID = 8477520184310335811L; 

public Language(String langIcon, String langName) { 
    setLangIcon(langIcon); 
    setLangName(langName); 
} 

public String getLangIcon() { 
    return get("langIcon"); 
} 

public String getLangName() { 
    return get("langName"); 
} 

public void setLangIcon(String langIcon) { 
    set("langIcon", langIcon); 
} 

public void setLangName(String langName) { 
    set("langName", langName); 
} 
} 

これは私がComboBoxを初期化する方法です。私はdisplayField "langName"を変更したいと思います。

final ListStore<Language> countries = new ListStore<Language>(); 
final Language german = new Language("de_DE", "Deutsch"); 
final Language english = new Language("en_GB", "Englisch"); 
countries.add(german); 
countries.add(english); 

final ComboBox<Language> combo = new ComboBox<Language>(); 
combo.setWidth(100); 
combo.setStore(countries); 
combo.setDisplayField("langName"); 
combo.setTemplate(getFlagTemplate()); 
combo.setTypeAhead(true); 
combo.setTriggerAction(TriggerAction.ALL); 
combo.setValue(german); 

これは2つの選択可能な値を示すComboBoxのテンプレートです。

private native String getFlagTemplate() /*-{ 
    return [ '<tpl for=".">', '<div class="x-combo-list-item">', 
      '<img src="resources/images/lang/{langIcon}.png">', 
      ' {langName}</div>', '</tpl>' ].join(""); 
}-*/; 

どのように私はdisplayFieldのためのテンプレートを使用したり、他の可能性があることができますか？

ありがとうございます！

Answer 1

com.extjs.gxt.ui.client.widget.form.ListModelPropertyEditorを実装する必要があります。

com.extjs.gxt.ui.client.widget.form.PropertyEditor#getStringValueは表示する文字列を返し、com.extjs.gxt.ui.client.widget.form.PropertyEditor#convertStringValueは表示された文字列をモデルに戻します。

これは非常にパフォーマンスの実装ではありませんが、それは動作します：

public class TemplateModelPropertyEditor<D extends ModelData> extends 
     ListModelPropertyEditor<D> { 

    /** Template to render the model. */ 
    private XTemplate template; 

    @Override 
    public D convertStringValue(final String value) { 
     for (final D d : models) { 
      final String val = getStringValue(d); 
      if (value.equals(val)) { 
       return d; 
      } 
     } 
     return null; 
    } 

    @Override 
    public String getStringValue(final D value) { 
     if (template != null) { 
      final Element div = DOM.createDiv(); 
      template.overwrite(div, Util.getJsObject(value)); 
      return div.getInnerText(); 
     } 
     final Object obj = value.get(displayProperty); 
     if (obj != null) { 
      return obj.toString(); 
     } 
     return null; 
    } 

    public void setSimpleTemplate(final String html) { 
     template = XTemplate.create(html); 
    } 
} 

使用法：輸入

TemplateModelPropertyEditor<Language> propertyEditor = new TemplateModelPropertyEditor<Language>(); 
propertyEditor.setSimpleTemplate(getFlagTemplate()); 
combo.setPropertyEditor(propertyEditor); 

Answer 2

を？

私はこれらのものを追加しました：

import com.extjs.gxt.ui.client.core.XTemplate; 
import com.extjs.gxt.ui.client.util.Util; 
import com.extjs.gxt.ui.client.widget.form.ListModelPropertyEditor; 
import com.google.gwt.user.client.DOM; 
import com.google.gwt.user.client.Element; 

Everthingが正常に動作しますが、それはアイコンが表示されません。 return div.getInnerText（）メソッドをデバッグすると、次のエラーが発生します。メソッド "getInnerText" with signature "（）Ljava/lang/String;"このオブジェクトには適用されません。

作成したdiv要素は

<DIV><DIV class=x-combo-list-item><IMG src="http://127.0.0.1:8888/resources/images/lang/de_DE.png"> Deutsch</DIV></DIV>