EXT-GWT (GXT) Значок отображения и текст для поля отображения в Combobox - PullRequest
Новая
       12

EXT-GWT (GXT) Значок отображения и текст для поля отображения в Combobox

0 голосов
/ 13 марта 2012

Кто-нибудь знает, как отобразить значок и текст для поля отображения в ext-gwts combobo? Я перепробовал все.

В третьем 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 или есть другая возможность?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 15 марта 2012

какой импорт?

Я добавил эти: 

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;

Все работает нормально, но значок не отображается. Когда я отлаживаю метод return 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>
0 голосов
/ 13 марта 2012

Вам необходимо реализовать 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);
...