extjs中通过tpl实现带图标的ComboBox
2016-03-02 11:38
441 查看
extjs中通过tpl实现带图标的ComboBox
(2010-12-20 19:34:52)
转载▼
标签: | 分类: Extjs |
既然可以显示信息文字,当然应该可以显示图片,笔者通过测试,可以这样实现
部分代码如下:
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"> {name}</div></tpl>',
fieldLabel:"菜单图标",
emptyText:'请选择',
...
其中name为图标的名称,url为图标的路径位置,效果图如下:
//----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学习笔记(四) 数据代理
- 关于 Ajax中返回json类型数据为什么使用? eval()
- JS魔法堂:判断节点位置关系
- js框架
- js显示yyyy年mm日dd天 星期几 的格式日期
- 加载js 简单获取get传递参数
- javascript里的DOM和BOM
- JSP默认HTML4改为HTML5
- JS 倒计时
- 妙用Javascript运算符“||”和“&&”
- JSP中9大隐式对象的总结
- 验证是否登录再js打开新窗口无拦截
- js格式化数字,金额按千位逗号分隔,负号用括号
- 熟悉JavaScript中的this关键字
- javascript求日期差的方法
- javascript 获取滚动条高度+常用js页面宽度与高度
- js中Math()函数&&数据类型转换
- json_encode的第二个参数解析
- JSON与XML
- js subString截取图片路径