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

  效果如图:

      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. Swift: Initialization-1

    初始化的过程包括为每一个存储属性设置一个初始值和其他步骤.通过定义构造函数来实现初始化的过程,跟oc的初始化函数不同,Swift的构造函数不返回一个值.它们的主要角色是确保一个类型的实例在初次使用前被 ...

  2. [转] Immutable 详解及 React 中实践

    https://zhuanlan.zhihu.com/p/20295971 作者:camsong链接:https://zhuanlan.zhihu.com/p/20295971来源:知乎著作权归作者所 ...

  3. Myeclipse快捷键的设置

  4. SQL Server 事务、异常

    转自: http://www.cnblogs.com/moss_tan_jun/archive/2011/11/26/2263988.html   事务 在数据库中有时候需要把多个步骤的指令当作一个整 ...

  5. Android Listview with different layout for each row

    http://stackoverflow.com/questions/4777272/android-listview-with-different-layout-for-each-row 其关键在重 ...

  6. Android开发--二维码开发应用(转载!)

    android项目开发 二维码扫描   基于android平台的二维码扫描项目,可以查看结果并且链接网址 工具/原料 zxing eclipse 方法/步骤   首先需要用到google提供的zxin ...

  7. 完全卸载oracle

    今天在网上看到有位网友写的篇日志,感觉蛮好的,一般卸载oracle有4个地方需求注意:1)Services,2)software,3eventlog,4)path. 1.关闭 oracle 所有的服务 ...

  8. CI 笔记3 (easyui 的layout布局,最小化layout原型)

    在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...

  9. Jquery实现图片左右滚动(自动)

    <!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...

  10. TextView控件

    1.手动创建(不建议): TextView tv = new TextView(this); tv.setContent("你好"); setContentView(tv); 2. ...