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

  效果如图:

      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. how tomcat works 读书笔记四 tomcat的默认连接器

    事实上在第三章,就已经有了连接器的样子了,只是那仅仅是一个学习工具,在这一章我们会開始分析tomcat4里面的默认连接器. 连接器 Tomcat连接器必须满足下面几个要求 1 实现org.apache ...

  2. JSON 入门

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  3. SSL 错误

    javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection?    at com.sun.net.ssl.in ...

  4. [转] android 中 任务、进程和线程的区别

    PS: handler的目的是在组件进程中开辟一个线程作为消息的poller,收到消息后可以更新Activity中的控件(特殊的view) 任务.进程和线程     关于Android中的组件和应用, ...

  5. AndroidManifest.xml中的application中的name属性 分类: android 学习笔记 2015-07-17 16:51 116人阅读 评论(0) 收藏

    被这个不起眼的属性折磨了一天,终于解决了. 由于项目需要,要合并两个android应用,于是拷代码,拷布局文件,拷values,所有的都搞定之后程序还是频频崩溃,一直没有找到原因,学android时间 ...

  6. STL的基本使用之关联容器:map和multiMap的基本使用

    STL的基本使用之关联容器:map和multiMap的基本使用 简介 map 和 multimap 内部也都是使用红黑树来实现,他们存储的是键值对,并且会自动将元素的key进行排序.两者不同在于map ...

  7. 点击文字可以选中相应的checkbox

    <html><head><title>中国站长天空-网页特效-表单特效-点击文字选中的复选框</title><meta http-equiv=&q ...

  8. js 之 复制一段代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. MySQL数据库服务器 主从配置

    A B 为两台 MySQL 服务器,均开启二进制日志,数据库版本 MySQL 5.5 一.服务器参数   [A 服务器 192.168.1.100] server-id = 1 binlog-do-d ...

  10. iOS适配:Masonry介绍与使用实践:快速上手Autolayout

    随着iPhone的手机版本越来越多, 那么对于我们广大的开发者来说就是很悲催,之前一直使用代码里面layout的约束来适配, 现在推荐一个第三方Masonry,上手块,操作简单,只能一个字形容他 “爽 ...