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

阅读更多

由于工作的要求，需要在combox中实现图片+文字的效果，由于本人才刚刚在iteye上发博客，不太会贴图片，因此效果图我放在附件里了，欢迎下载查看：
项目中使用的技术是ext4.1，实现如图片效果的代码如下，给大家贴出来，共同学习啊：

this.items = [
		              {
		                  xtype: 'form',
		                  bodyPadding	: '5 5 0',
		                  items: [
		                      {
		                       		xtype: 'textfield',
		                          	name : 'name',
		                          	labelAlign	: 'right',
		                          	fieldLabel: '*按钮名称'
		                      },
		                      {
			                   		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:'
 {name}'[/b],//zz这里的icon是你的图片的具体路径，不要搞错哦，我这里是通过上面的那个json获得图片路径的
									displayField: 'name',
            						valueField  : 'value',
									editable	: false,
									multiSelect : false		                      	
		                      }
]

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

• 
• 大小: 11.1 KB

• 查看图片附件