ext4在combox的下拉框中显示图片+文字的功能

由于工作的要求,需要在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">&nbsp;{name}</div></tpl>'[/b],//zz这里的icon是你的图片的具体路径,不要搞错哦,我这里是通过上面的那个json获得图片路径的
									displayField: 'name',
            						valueField  : 'value',
									editable	: false,
									multiSelect : false		                      	
		                      }
]



很多以前的ext版本中,也可以使用tpl,但是在ext4中,以前的class样式已经不存在了,因此如果你直接使用那种方式会出现无法选中选项的问题,换成x-boundlist-item这个样式就可以实现啦
找了好久才找到的哦,嘿嘿

你可能感兴趣的:(图片,combobox,combox,ext4)