在組合框中顯示的字體真棒圖標extjs 6

Question

我嘗試了幾種方法來設置一個圖標，在顯示字段中，當選擇一個組合的項目時沒有運氣，這是任何人想要嘗試幫助的小提琴這個。非常感謝任何光。

fiddle example

Answer 1

唯一的解決辦法是與此變換輸入類型組合在一個div：

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方法是這樣的：

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

和風格你的假組合div喜歡你想要的。

這是因爲HTML上的輸入不能像HTML中的值那樣。

保持關注，獲取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