如何使用組合中的圖像在extjs 4.1

我嘗試創建一個組合圖像（或其他），當我選擇一個選項時，組合中的值有一些選項。如何使用組合中的圖像在extjs 4.1

我創建了一個組合框的樣子：

enter image description here

但是，當我選擇，看起來一個選項，如：

enter image description here

// The data store containing the list of states 
var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data : [{ 
    "abbr":"AL", 
    "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>" 
    }, 
    { 
    "abbr":"AK", 
    "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>" 
    }, 
    { 
    "abbr":"AZ", 
    "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>" 
    }] 
}); 

// Create the combo box, attached to the states data store 
Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose', 
    store: states, 
    tpl: '<tpl for="."><div class="x-boundlist-item" >{name} {abbr}</div></tpl>', 
    displayTpl: Ext.create('Ext.XTemplate', 
     '<tpl for=".">', 
      '{name} {abbr}', 
     '</tpl>' 
    ), 
    queryMode: 'local', 
    displayField: 'abbr', 
    valueField: 'abbr', 
    renderTo: Ext.getBody() 
});

如何解決這個問題？謝謝！

來源

2013-10-09 DeLe

您將無法使用模板解決此問題。 ComboBox的顯示值用作文本輸入字段的值，這就是爲什麼您的HTML以字面顯示的原因。

這可能有些冒失，但你可以聽select事件並直接在inputEl上更新一些樣式。

請注意，此示例是一個近似值。您可能需要嘗試才能獲得理想的效果。

var urlBase = 'http://icons.iconarchive.com/icons/famfamfam/silk/16/'; 

// Don't use image tag, just URL of icon 
var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data: [ 
     {abbr: 'AL', name: urlBase + 'folder-picture-icon.png'}, 
     {abbr: 'AK', name: urlBase + 'folder-picture-icon.png'}, 
     {abbr: 'AZ', name: urlBase + 'folder-picture-icon.png'} 
    ] 
}); 

Ext.create('Ext.form.field.ComboBox', { 
    fieldLabel: 'Choose', 
    store:  states, 
    queryMode: 'local', 
    displayField: 'abbr', 
    valueField: 'abbr', 
    renderTo:  Ext.getBody(), 
    tpl: [ 
     '<tpl for=".">', 
      '<div class="x-boundlist-item">', 
       '<img src="{name}"/>{abbr}', 
      '</div>', 
     '</tpl>' 
    ], 
    listeners: { 
     select: function (comboBox, records) { 
      var record = records[0]; 
      comboBox.inputEl.setStyle({ 
       'background-image': 'url(' + record.get('name') + ')', 
       'background-repeat': 'no-repeat', 
       'background-position': '3px center', 
       'padding-left':  '25px' 
      }); 
     } 
    } 
});

來源

2013-10-09 14:17:13 Eric

無法運作 – DeLe

@trungkien固定它。 – Eric

如果你要使用這種方式，組合框將被標記爲無效，因爲它是喜歡你的自定義圖標設置爲背景圖片紅絲帶將隱伏（組合將只在一個紅色的框）。

要解決此問題，您可以收聽select和validitychange事件並在其中設置適當的樣式。

示例如何讓樣式有效/無效組合：

getComboBoxInputStype: function(imgPath, valid) { 
      return { 
       'background-image': valid ? 'url(' + imgPath + ')' : 'url(' + imgPath + '), url(../../Scripts/ext/images/grid/invalid_line.gif)', 
       'background-repeat': valid ? 'no-repeat' : 'no-repeat, repeat-x', 
       'background-size': valid ? '18px 18px' : '18px 18px, 4px 3px', 
       'background-position': valid ? '3px center' : '3px center, bottom', 
       'padding-left': '25px' 
      }; 
     }

來源

2015-04-15 16:21:21

刪除（名稱）從displayTpl象下面這樣：

displayTpl: 
 
Ext.create('Ext.XTemplate', 
 
    '<tpl for=".">', 
 
    '{abbr}', 
 
    '</tpl>' 
 
),

來源

2015-12-10 08:07:22 quocdunginfo

如何使用組合中的圖像在extjs 4.1

回答

相關問題