extjs中通过tpl实现带图标的ComboBox

11 篇文章 0 订阅
在使用extjs中的combobox控件时,通过变更tpl内容,可以很轻松实现提示内容,例如官方示例的examples\form\combos.html下,可以实现下图combobox的选择内容提示信息:
extjs中通过tpl实现带图标的ComboBox

既然可以显示信息文字,当然应该可以显示图片,笔者通过测试,可以这样实现
部分代码如下:
var AddmenuIcon=new Ext.form.ComboBox(
{
name:'AddmenuIcon',
store:new Ext.data.Store(
{
autoLoad:true,
proxy:new Ext.data.HttpProxy(
{url:'Sys_SysMenuManager_Get.asp?Action=ImgFileList'
}),
reader:new Ext.data.JsonReader(
{
},['name','url'])
}),
tpl: '<tpl for="."><div x-combo-list-item :qtip="{url}" class="x-combo-list-item"><img src="{url}" width="16" height="16">&nbsp;{name}</div></tpl>',
fieldLabel:"菜单图标",
emptyText:'请选择',
...
其中name为图标的名称,url为图标的路径位置,效果图如下:
extjs中通过tpl实现带图标的ComboBox

//----2012.1.12新增//

上面为单行显示,如果多行显示,定义的tpl这样描述:
tpl :'<table><tr><tpl for="."><td class="x-combo-list-item"><img width=16 height=16 src="{url}" /></td><tpl if="xindex % 3 === 0"></tr><tr></tpl></tpl></tr></table>'
其中 xindex % 3  3表示3列

extjs中通过tpl实现带图标的ComboBox
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值