font-awesome icon combobox extjsの表示で6

Question

コンボの項目が不運に選択されているときに、表示欄にアイコンを設定するいくつかの方法を試しましたが、これは誰でも助けようとする人のためのものですこの。どんな光でも非常に感謝しています。

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 
       } 
      ], 

オーバーライドこのようなコンボのsetRawValue方法：

fiddle example

Answer 1

唯一の解決策はこれでdiv要素に入力タイプのコンボを変換することです

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; 
      }, 

をし、あなたが望むようにあなたの偽のコンボ部門をスタイルします。

HTMLの入力にHTMLのような値を入れることはできません。

注意しておけば、Get Valueメソッドはdiv内のHTMLを返しますが、それを上書きする必要がありますが、唯一の方法です。

あなたはこの方法で選択された値を取得することができます：

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

私があなただったら、私はこのような何かやりたい：

combo.getMyValue(); 

をだからあなたにこのプロパティを追加コンボ：

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