如何在 extjs 4.1 中使用包含图像的组合
Posted
技术标签:
【中文标题】如何在 extjs 4.1 中使用包含图像的组合【英文标题】:How to work with combo having images inside in extjs 4.1 【发布时间】:2013-10-09 09:30:51 【问题描述】:我尝试用图像(或其他东西)创建一个组合,当我选择一个选项时,组合中的值有一些选项。
我创建了一个组合框,如下所示:
但是当我选择一个看起来像这样的选项时:
这是我的代码http://jsfiddle.net/QZqeK/
// 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()
);
如何解决这个问题?谢谢!
【问题讨论】:
【参考方案1】:您将无法使用模板解决此问题。 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'
);
);
【讨论】:
【参考方案2】:如果您要使用这种方法并且组合框将被标记为无效,则红色功能区将被隐藏,因为它被设置为您的自定义图标的背景图像(组合将仅在红色框架中)。
要解决此问题,您可以收听 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'
;
【讨论】:
【参考方案3】:从 displayTpl 中删除 name,如下所示:
displayTpl:
Ext.create('Ext.XTemplate',
'<tpl for=".">',
'abbr',
'</tpl>'
),
【讨论】:
以上是关于如何在 extjs 4.1 中使用包含图像的组合的主要内容,如果未能解决你的问题,请参考以下文章