`
李成林_89
  • 浏览: 38360 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

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这个样式就可以实现啦
找了好久才找到的哦,嘿嘿
  • 大小: 11.1 KB
分享到:
评论

相关推荐

    Ext IconComBox 图片下拉框

    Ext IconComBox是一款基于Ext JS库的组件,它扩展了标准的下拉框(ComboBox)功能,使得在下拉列表前可以添加自定义的图标。这个特性使得UI设计更加丰富多彩,提高了用户界面的视觉吸引力和交互性。在本文中,我们将...

    Ext_comBox模糊查询

    在EXT JS中,Combox(下拉框组件)是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,常用于数据选择和输入。本文将深入探讨如何在EXT中实现Combox的模糊查询功能,以及后台处理自动检索的方法。 模糊...

    ext combox 下拉框不出现自动提示,自动选中的解决方法

    然而,如果遇到EXT Combox下拉框不出现自动提示或者无法自动选中的问题,可能是由于分页功能的存在或者配置不当导致的。以下是一些关键的知识点和解决方法: 1. **禁用分页功能**: 分页功能在某些情况下可能会...

    EXT中COMBOX联动

    "EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    Ext_iconcombox

    Combox是Ext JS中的一个核心组件,它结合了TextBox和ListPanel的功能,允许用户输入文本或从下拉列表中选择一个项。在默认情况下,Combox只显示文本,但通过扩展和自定义,我们可以添加图标以增加信息的可视化表达。...

    EXT控件lovcombo

    在EXT控件中,"lovcombo"(即Love Combo)是一种特殊的ComboBox,通常用于显示一个列表,其中每个项可以被选择,类似于下拉框。这个lovcombo控件的特色在于它支持多选,通过复选框(checkboxes)来实现这一功能,...

    extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    在EXTJS中,创建一个具有特定功能的表单通常涉及到多个组件的组合使用,如文本框、下拉列表以及事件监听。在这个例子中,我们看到一个EXTJS的表单面板`Ext.FormPanel`被用来展示一个包含文本框、下拉列表和标签的...

    comboxTree下拉树,实现单选功能

    在EXT JS框架中,ComboxTree是一种特殊的组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能,允许用户从一个可展开的树形结构中选择单个项。本代码示例专注于实现ComboxTree的单选功能,即用户只能...

    Extjs 下拉菜单实现拼音输入进行检索

    Extjs 下拉菜单实现拼音输入进行检索

    Extjs 4.1 下拉框 Tree 的实现(mvc)

    本文将深入探讨如何在ExtJS 4.1环境中利用MVC架构实现一个功能丰富的下拉框(Tree ComboBox),并结合具体代码示例进行详细解析。 ### ExtJS 4.1 下拉框Tree实现(MVC) #### 1. MVC架构简介 MVC,即Model-View-...

    Ext JS 实现建议词模糊动态搜索功能

    在本篇文章中,我们将深入探讨如何使用Ext JS 实现建议词模糊动态搜索功能,这对于提升用户体验和提高数据查询效率至关重要。 首先,实现模糊动态搜索的核心组件是`Ext.form.ComboBox`,这是一个下拉框组件,支持...

Global site tag (gtag.js) - Google Analytics