font-awesome Symbol in der Anzeige der Combobox extjs 6

Question

Ich habe versucht, mehrere Möglichkeiten, ein Symbol im Displayfeld, wenn ein Element der Combo mit nicht Glück ausgewählt ist, das ist die Geige für jeden, der versuchen möchte, mit zu helfen Dies. sehr geschätzt jedes Licht.

fiddle example

Answer 1

Die einzige Lösung ist, die Eingangstyp Kombination in einem div mit diesem zu transformieren:

fieldSubTpl: [ 
       '<div class="{hiddenDataCls}" role="presentation"></div>', 
       '<div id="{id}" type="{type}" style="background-color:white; font-size:1.1em; line-height: 2.1em;" ', 
       '<tpl if="size">size="{size}" </tpl>', 
       '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 
       'class="{fieldCls} {typeCls}" autocomplete="off"></div>', 
       '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">', 
       '{triggerEl}', 
       '<div class="{clearCls}" role="presentation"></div>', 
       '</div>', { 
        compiled: true, 
        disableFormats: true 
       } 
      ], 

überschreiben die setRawValue Methode des Kombinations wie folgt aus:

setRawValue: function (value) { 
       var me = this; 
       me.rawValue = value; 

       // Some Field subclasses may not render an inputEl 
       if (me.inputEl) { 
        // me.inputEl.dom.value = value; 
        // use innerHTML 
        me.inputEl.dom.innerHTML = value; 
       } 
       return value; 
      }, 

und style deine gefälschte Combo div wie du willst.

Thats, weil eine Eingabe auf HTML nicht HTML wie Wert darin haben kann.

Behalten Sie Aufmerksamkeit, die Methode get Value gibt Ihnen den HTML-Code innerhalb des div zurück, und vielleicht sollten Sie ihn auch überschreiben, aber das ist die einzige Methode.

Sie können den ausgewählten Wert mit dieser Methode erhalten:

Ext.fly(combo.getId()+'-inputEl').dom.innerHTML.replace(/<(.|\n)*?>/gm, ''); 

Wenn ich Sie wäre, würde Ich mag so etwas tun:

combo.getMyValue(); 

So diese Eigenschaft hinzufügen Ihren Combo:

getMyValue:function(){ 
      var combo=this; 
      if(Ext.fly(combo.id+'-inputEl')) 
      return Ext.fly(combo.id+'-inputEl').dom.innerHTML.replace(/<(.|\n)*?>/gm, ''); 
     }, 

Here is a working fiddle