Zapełnianie ikon w Sencha Wybierz pole wyboru

Question

Mam dość prosty problem, którego rozwiązanie okazuje się wcale nie takie proste.
Chcę dodać zdjęcia przed każdą opcją z selectfield. Aby być bardziej dokładnym, chcę dodać zdjęcia do wyzwalaczy picker, a także do bieżącej wartości pola wyboru.
Dla uproszczenia, będę tworzyć mały przykład:

Powiedzmy, chcesz użytkownikowi wybrać jeden z kombinezony karty cztery gry karo, kier, pik i kluby. Aby wspierać uznanie wizualnej, chcesz poprzedzić odpowiedni symbol do każdej nazwy garnitur, więc może to wyglądać tak:

Mój pierwszy wybór składnika dotykowym Sencha, który pozwala na wybór z danego zestawu opcji naturalnie był selectfield. Niestety, wydaje się, że można wyświetlić tylko czysty tekst i nic więcej. Po wkopaniu się w źródła dotykowe sencha, w końcu wymyśliłem pół rozwiązania. Zasadniczo przekazuję selectfield niestandardowy defaultPhonePickerConfig, w którym odpowiedni picker (który jest używany przez selectfield do wyświetlania opcji) zostaje przypisany niestandardowy itemTpl. itemTpl zrobi resztę, czyli dodając trochę html do wyświetlania obrazu:

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's change handler, 
      // since it gets overwritten 
      var iconSelect = Ext.Viewport.query('#IconSelect')[0]; 
      iconSelect.onPickerChange.apply(iconSelect, arguments); 
     } 
    } 
} 

Działający skrzypce dla tego rozwiązania można znaleźć here.

Moje rozwiązanie nie jest tak źle, ale jest mały problem kosmetycznym, to po prostu nie do przyjęcia dla mnie: Ikony są wyświetlane tylko w picker (dolnej części ekranu powyżej), ale nie sama selectfield (górna, szara część) po wybraniu opcji. I wydaje się, że nie ma dobrego sposobu na dodanie ikony do bieżącej wartości pola wyboru.

I to jest głównym problemem mojego pytania: Jaki jest dobry sposób dodania ikony do zarówno opcji pobierania, jak i aktualnej wartości selecfield? Czy może po prostu muszę dodać względnie mało kodu do mojego istniejącego rozwiązania, czy też powinienem przyjąć zupełnie inne podejście?
Każdy wkład jest mile widziany. Dziękuję Ci!

Aktualizacja:
Po pewnym hacking wokół, znalazłem sposób (brzydki jeden) do prepend ikonę do samego selectfield. Opiera się głównie na brutalnej manipulacji HTML DOM: teraz definiuję również procedury obsługi zdarzeń dla samej siebie (selectfield (change i painted). Podczas inicjowania i za każdym razem, gdy wartość jest zmieniana, moje programy obsługi przeszukują wygenerowany DOM dla podstawowego <input> i pomijają go. (Ten zły chłopiec jest prawdopodobnie powodem, dla którego nie możemy przypisać HTMLa, ponieważ framework zmienia jego atrybut value, a value z drugiej strony może zawierać tylko zwykły tekst.)
To jak ja zdefiniować selectfield „s 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); 
     } 
} 

odpowiednia funkcja prependIconToSelectfield() właśnie definiuje pewne 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'; 
} 

odjazdu this fiddle na przykład pracy.

To nadal nie jest dobre rozwiązanie dla mnie, ponieważ robienie tego rodzaju hackowskich manipulacji DOM jest zbyt różne. łotr dla mojego gustu. Nie wiem, jakie skutki uboczne aktywnego zamieszania w DOM mogą być w większych projektach i nie chcą uczyć się go na własnej skórze. Wciąż szukam czystszego rozwiązania.

Answer 1

Po pierwsze, praca nad tak ciężkim dotknięciem sencha jest niezwykle trudna do manipulowania przy próbie zrobienia czegoś z pudełka. Powiedziawszy to, pozwól mi wypróbować & zaproponować rozwiązanie tego, co chcesz. Pole wyboru w sencha ma następującą strukturę tagu DOM.

div.x-field-select 
    div.x-field-input 
     input.x-input-el 
     div.x-clear-icon 
     div.x-field-mask 

teraz skoncentrować się na X-jasne-ikona jest zwykle ukryte ponieważ selectfield nie potrzebują jasnego przycisk. Najpierw napisz klasę css, aby ją wyświetlić (display: block). Zostanie wyświetlony przycisk X podobny do pola tekstowego &, który zostanie umieszczony w prawym rogu. Możesz przez css ustawić go w lewo, a po zmianie pola wyboru możesz zmienić jego tło na to, co chcesz. To nie jest proste rozwiązanie, ale próbowałem go dla podobnego problemu. Działa to. Sądząc po tym, co zrobiłeś powyżej, myślę, że możesz to zrobić. Wszystkiego najlepszego. Mam nadzieję, że moje rozwiązanie pomaga.