由于工作的要求,需要在combox中实现图片+文字的效果,由于本人才刚刚在iteye上发博客,不太会贴图片,因此效果图我放在附件里了,欢迎下载查看:
项目中使用的技术是ext4.1,实现如图片效果的代码如下,给大家贴出来,共同学习啊:
this.items = [
{
xtype: 'form',
bodyPadding : '5 5 0',
items: [
{
xtype: 'textfield',
name : 'name',
labelAlign : 'right',
fieldLabel: '<font color=red>*</font>按钮名称'
},
{
fieldLabel : '图标',
xtype : 'combobox',
name : 'icon',
store : Ext.create('Ext.data.Store',{
fields : ['name', 'icon','value'],
autoLoad:true,
proxy :{
type :'ajax',
url : '../***/***/***/***/store/button/icon.json'//json的目录啦,或者是你远程的json也可以
},
reader : {
type : 'json'
}
}),
labelAlign : 'right',
[b]tpl:'<tpl for="."><div x-boundlist-item:qtip="{icon}" class="x-boundlist-item"><img src="{icon}" width="16" height="16"> {name}</div></tpl>'[/b],//zz这里的icon是你的图片的具体路径,不要搞错哦,我这里是通过上面的那个json获得图片路径的
displayField: 'name',
valueField : 'value',
editable : false,
multiSelect : false
}
]
很多以前的ext版本中,也可以使用tpl,但是在ext4中,以前的class样式已经不存在了,因此如果你直接使用那种方式会出现无法选中选项的问题,换成x-boundlist-item这个样式就可以实现啦
找了好久才找到的哦,嘿嘿