由于工作的要求,需要在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这个样式就可以实现啦
找了好久才找到的哦,嘿嘿
- 大小: 11.1 KB
分享到:
相关推荐
Ext IconComBox是一款基于Ext JS库的组件,它扩展了标准的下拉框(ComboBox)功能,使得在下拉列表前可以添加自定义的图标。这个特性使得UI设计更加丰富多彩,提高了用户界面的视觉吸引力和交互性。在本文中,我们将...
在EXT JS中,Combox(下拉框组件)是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,常用于数据选择和输入。本文将深入探讨如何在EXT中实现Combox的模糊查询功能,以及后台处理自动检索的方法。 模糊...
然而,如果遇到EXT Combox下拉框不出现自动提示或者无法自动选中的问题,可能是由于分页功能的存在或者配置不当导致的。以下是一些关键的知识点和解决方法: 1. **禁用分页功能**: 分页功能在某些情况下可能会...
"EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...
Combox是Ext JS中的一个核心组件,它结合了TextBox和ListPanel的功能,允许用户输入文本或从下拉列表中选择一个项。在默认情况下,Combox只显示文本,但通过扩展和自定义,我们可以添加图标以增加信息的可视化表达。...
在EXT控件中,"lovcombo"(即Love Combo)是一种特殊的ComboBox,通常用于显示一个列表,其中每个项可以被选择,类似于下拉框。这个lovcombo控件的特色在于它支持多选,通过复选框(checkboxes)来实现这一功能,...
在EXTJS中,创建一个具有特定功能的表单通常涉及到多个组件的组合使用,如文本框、下拉列表以及事件监听。在这个例子中,我们看到一个EXTJS的表单面板`Ext.FormPanel`被用来展示一个包含文本框、下拉列表和标签的...
在EXT JS框架中,ComboxTree是一种特殊的组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能,允许用户从一个可展开的树形结构中选择单个项。本代码示例专注于实现ComboxTree的单选功能,即用户只能...
Extjs 下拉菜单实现拼音输入进行检索
本文将深入探讨如何在ExtJS 4.1环境中利用MVC架构实现一个功能丰富的下拉框(Tree ComboBox),并结合具体代码示例进行详细解析。 ### ExtJS 4.1 下拉框Tree实现(MVC) #### 1. MVC架构简介 MVC,即Model-View-...
在本篇文章中,我们将深入探讨如何使用Ext JS 实现建议词模糊动态搜索功能,这对于提升用户体验和提高数据查询效率至关重要。 首先,实现模糊动态搜索的核心组件是`Ext.form.ComboBox`,这是一个下拉框组件,支持...