Заполнение иконки в Sencha Touch selectfield

У меня довольно простая проблема, решение которой оказывается не таким простым.
Я хочу добавить изображения перед каждой опцией selectfield. Чтобы быть более точным, я хочу добавить изображения в триггеры picker, а также текущее значение selectfield.
Для простоты я создам небольшой пример:

Скажем, вы хотите, чтобы пользователь выбирал один из четырех игровых карточек: Diamonds, Hearts, Spades и Clubs. Чтобы поддерживать визуальное распознавание, вы хотите добавить соответствующий символ к каждому имени костюма, чтобы он выглядел примерно так:

Мой первый выбор сенсорного компонента sencha, который позволяет выбирать из заданного набора параметров, естественно, был selectfield. К сожалению, он, по-видимому, способен отображать чистый текст, и не более того. Покопавшись в источниках сенча, я, наконец, придумал половину решения. В основном, я передаю selectfield пользовательский defaultPhonePickerConfig, в котором соответствующему picker (который используется selectfield для отображения параметров) присваивается пользовательский itemTpl. itemTpl делает все остальное, а именно добавление некоторого html для отображения изображения:

defaultPhonePickerConfig: {
    listeners: {
        initialize: function() {
            var slots = this.query('pickerslot');
            Ext.each(slots, function(slot) {
                slot.setItemTpl('<img src="someImage.jpg"> {text}');
            });

        },

        change: function() {
            // reconstruct the selectfield change handler,
            // since it gets overwritten
            var iconSelect = Ext.Viewport.query('#IconSelect')[0];
            iconSelect.onPickerChange.apply(iconSelect, arguments);
        }
    }
}

Для этого решения можно найти скрипт здесь.

Мое решение не так уж плохо, но есть небольшая косметическая проблема, которая мне не подходит: значки отображаются только в picker (нижняя часть скриншота выше), но не selectfield (верхняя, серая часть), когда была выбрана опция. И, похоже, нет хорошего способа добавить значок к текущему значению selectfield.

И что главная проблема моего вопроса: какой хороший способ добавить значок в как параметры выбора, так и значение текущего значения selecfield? Может быть, мне просто нужно добавить относительно небольшой код в мое существующее решение или я должен использовать целый подход? Каждый вклад приветствуется. Спасибо!

Update:
После некоторого взлома я нашел способ (уродливый), чтобы добавить значок к самому selectfield. В основном это основано на жестоких манипуляциях HTML DOM: теперь я также определяю обработчики событий для самого selectfield (change и painted). При инициализации и при каждом изменении значения мои обработчики ищут сгенерированную DOM для лежащего в основе <input> и обходятся с ней. (Этот плохой мальчик, вероятно, является причиной того, что мы не можем назначить HTML в первую очередь, так как каркас меняет свой атрибут value. И value, с другой стороны, может содержать только обычный текст.)
Вот как я определяю selectfield listeners:

listeners: {
       change: function () {
           var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]');
           PickerIcons.app.prependIconToSelectfield(arguments[1], pickerDOM);
       },
       painted: function () {
           // Initialize an icon on creation
           var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]');
           PickerIcons.app.prependIconToSelectfield(this.getValue(), pickerDOM);
       }
}

Соответствующая функция prependIconToSelectfield() просто определяет некоторый CSS:

prependIconToSelectfield: function (optValue, domElement) {
    var iconUrl = this.getIconUrl(optValue);
    domElement.style.backgroundImage = 'url(' + iconUrl + ')';
    domElement.style.backgroundSize = '20px 20px';
    domElement.style.backgroundRepeat = 'no-repeat';
    domElement.style.backgroundPosition = 'left center';
    domElement.style.paddingLeft = '30px';
}

Просмотрите эту скрипту для рабочего примера.

Это по-прежнему не очень хорошее решение для меня, так как выполнение такого рода хакерских манипуляций с DOM слишком изгоев для моего вкуса. Я не знаю, какие побочные эффекты активного вовлечения в DOM могут быть в больших проектах и не хотят изучать его с трудом. Итак, я все еще ищу более чистое решение.

Ответ 1