今天,莫名的来个一个需求,需要做的一个下拉框中,需要有图片,这不。。。谷歌+度娘然后找网友,终于搞定。现在感谢这些提供资料的友友...

  效果如图:

      aaarticlea/png;base64,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" alt="" />

var states = Ext.create('Ext.data.Store', {
fields: ['url', 'name'],
data : [
{"url":"花地1.jpg", "name":"Alabama"},
{"url":"花地1.jpg", "name":"Alaska"},
{"url":"花地1.jpg", "name":"Arizona"}
//...
]
}); Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
displayField: 'name',
queryMode: 'local',
renderTo: Ext.getBody(),
listConfig: {
getInnerTpl: function() {
return '<div data-qtip="{name}"><img src="{url}" width="16" height="16"> {name}</div>';
}
}
});
});

效果不错,学习研究Extjs4...工作中!

Extjs4中用combox做下拉带图片的下拉框的更多相关文章

  1. select下拉带图片-模拟下拉

    <style> /*下拉列表*/ ul,dl,ol,li {list-style: none;} .dropdown { float: right; position: relative; ...

  2. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  3. Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

    经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...

  4. Easy UI combobox实现类似 Select2的效果,下拉带搜索框

    一直在开发一个新系统,其中用Easy UI作为前端框架,少不了用 combobox做为一个 下拉控件,它支持 可编辑 模糊本地数据过滤,也可支持 不可编辑 下拉 选择的功能: $('#ID' ).co ...

  5. IOS下拉放大图片

    代码地址如下:http://www.demodashi.com/demo/11623.html 一.实现效果图 现在越来越多的APP中存在下拉放大图片的效果,今天贡献一下我的实现这种方法的原理,和我遇 ...

  6. android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片,上拉回弹 上拉滚动顶部title 颜色渐变

    首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...

  7. 清除win7桌面背景的图片位置下拉菜单的历史记录

    到注册表 清除win7桌面背景的图片位置下拉菜单的历史记录: 开始--->运行--->输入regedit,在弹出的注册表编辑器中,定位到如下位置 HKEY_CURRENT_USER\Sof ...

  8. iOSUITableView头部带有图片并且下拉图片放大效果

    最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图: 1.gif 实现原理很简单,就是在UITableview上边添加一个图片子视图,在ta ...

  9. 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

随机推荐

  1. android 31 GridView

    GridView:网格列表,也支持适配器. package com.sxt.day05_01; import java.util.ArrayList; import java.util.List; i ...

  2. Qt的皮肤设计(Style Sheet)

      Qt的皮肤设计,也可以说是对Qt应用程序的界面美化,Qt使用了一种类CSS的样式规则QSS. 一.Style Sheet的应用 1.直接在程序代码中设置样式,利用setStyleSheet()方法 ...

  3. URAL 1062 - Triathlon(半平面交)

    这个题乍眼一看好像很简单,然后我就认为u.v.w只要有全部比另外一个人小的就不能win,否则就能win,但是这个思路只对了一半 不能win的结论是正确的,但是win的结论不止排除这一个条件 将这个人与 ...

  4. 《ICSharpCode快速解压缩帮助类》——即粘即用

    在项目中往往使用解压缩公共类,解压缩之后的文件占用空间小,也可进行加密,往往可以用于客户端上传附件,打包输出主程序等,其中的好处就不多说了,最近着手的项目中多次使用到了解压缩方法,现较流行的就是ICS ...

  5. Android自定义Notification并没有那么简单

    背景 最近需要实现一个自定义Notification的功能.网上找了找代码,解决方案就是通过RemoteViews来实现.但是在实现过程中遇到不少问题,网上也没有很好的文章描述这些问题,所以在这里做个 ...

  6. javascript 高级程序设计(三)-数据类型

    ECMAScript 中所有类型的值都有与这两个Boolean值等价的值   数据类型     转换为true的值   转换为false的值 Boolean true   false( String ...

  7. noip 2003 传染病控制(历史遗留问题2333)

    /*codevs 1091 搜索 几个月之前写的70分 今天又写了一遍 并且找到了错误 */ #include<cstdio> #include<vector> #define ...

  8. 每次打开VS2010都会报“ devenv.exe -Assert Failure”这个错误

    把.net framework4.5中文包卸载掉,, 如果还不行就把.net framework4.5也卸载掉,,然后到微软官网下载net framework4.5安装包安装,安装完后把中文包卸载掉就 ...

  9. Rouh set 入门知识3(上下近似集,正负域,边界域)

    在RS中,引入两个概念:一个是下近似集,另一个是上近似集.下近似集是指当一个集合不能利用有效的等价关系被恰当的分类是时,则可通过另外的集合来达到这个集合的近似.形式上,设X⊆U是任一子集,R是U上的等 ...

  10. SQL常用的语句和函数

    order by 的数值型灵活使用 select * from table_a where order by decode(函数,'asc',1,'desc',-1)*jsny; 控制试图的访问时间: ...