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

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

  (2010-12-20 19:34:52)

转载▼

标签：  extjs   图标   combobox   tpl   it

分类： Extjs

在使用extjs中的combobox控件时，通过变更tpl内容，可以很轻松实现提示内容，例如官方示例的examples\form\combos.html下，可以实现下图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为图标的路径位置，效果图如下：

//----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列