Question

有没有人知道如何在ext-gwts组合框中显示显示字段的图标和文字？我尝试了一切。

在此示例的第三个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);

这是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工作正常，但不显示图标。当我调试返回div.getInnerText（）方法时抛出一个名为：方法“getInnerText”的错误，带有签名“（）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>

EXT-GWT（GXT）显示Combobox中显示字段的图标和文本

2 个答案: