实现extjs actioncolumn中点击图标 显示手型的偏方
2014-07-30 10:59
211 查看
可能很多小伙伴和我一样,会遇到一个很头疼的问题,那就是在使用Extjs4.1版本的actioncolumn时,想要实现当鼠标点击某一个图片时显示手型的效果。可是Extjs4.1很不给力,不管你使用它给出的API的任何配置,都不能将我们自定义的样式添加到对应的组件上(也可能是我自己能力有限,或者是自定义的样式名称必须要按照某一个规范来写?),反正在网上找了很久,依然难以寻觅到良方妙药。最后,只能自己想办法了。
以下是我自己的一个偏方,希望能够对各位有帮助。
偏方的核心思想就是重写Extjs的默认样式,从而实现样式的覆盖。
首先通过FireFox的样式查看工具,发现actioncolumn下的xtype为img的items都被渲染为<img>标签。如下图所示:
在class样式中默认使用了x-action-col-icon 和x-action-col-0(0会随着你添加的items数量而变化)两个默认样式,尝试了将这两个样式删除,发现对显示效果并没有任何影响。那么,我们为什么不能直接覆盖这两个默认样式,自定义自己的样式呢???let do it!
以下选择覆盖x-action-col-icon,编写样式文件:
<style type="text/css">
.x-action-col-icon{
cursor:pointer
}
</style>
OK,就这么多。重新刷新一下你的页面吧,看看效果,是不是看见那个让我们日思夜想的小手啦。
以下是我自己的一个偏方,希望能够对各位有帮助。
偏方的核心思想就是重写Extjs的默认样式,从而实现样式的覆盖。
首先通过FireFox的样式查看工具,发现actioncolumn下的xtype为img的items都被渲染为<img>标签。如下图所示:
在class样式中默认使用了x-action-col-icon 和x-action-col-0(0会随着你添加的items数量而变化)两个默认样式,尝试了将这两个样式删除,发现对显示效果并没有任何影响。那么,我们为什么不能直接覆盖这两个默认样式,自定义自己的样式呢???let do it!
以下选择覆盖x-action-col-icon,编写样式文件:
<style type="text/css">
.x-action-col-icon{
cursor:pointer
}
</style>
OK,就这么多。重新刷新一下你的页面吧,看看效果,是不是看见那个让我们日思夜想的小手啦。
相关文章推荐
- flash实现点击QQ图标显示QQ对话框
- angularjs实现点击图标显示div,点击div以外的区域隐藏div
- 【ExtJs】表格控件Grid的增删改查,利用renderer让操作列actioncolumn使用文字而不是图标
- swing 自定义最小化按钮后,实现点击任务栏图标,使窗体重新显示
- ExtJs actioncolumn根据grid数据动态显示按钮
- Extjs4 actioncolumn只能显示图标,不能显示文字的暂时解决方法
- Extjs actioncolumn动态显示按钮
- pushbutton成为可点击的图标(实现全透明,不论点击与否都只显示Icon)(也就是一个万能控件)
- 一个窗口里包含一个iframe,点击iframe内的submit按钮,返回的视图总是显示在iframe中,我想要的效果是点击按钮后返回的视图是在浏览器窗口中...?asp.net mvc 的action中,不用js怎么实现??????????
- Extjs4 actioncolumn只能显示图标,不能显示文字的暂时解决方法
- EXTJS actionclomn点击切换图标 单独设置disable
- Qt实用技巧:qtwidget中pushbutton成为可点击的图标(实现全透明,不论点击与否都只显示Icon)
- 第二人生的源码分析(九十八)LLIconCtrl实现图标按钮显示
- Gridview实现多列排序,并显示图标
- 同一页面中实现点击其中一个iframe中的链接后,将链接内容显示到另一iframe
- 自定义控件---重写Listbox实现item图标变换和item点击事件
- 求助:想实现点击按钮“下一张”就会显示下一张图片的函数
- flex button 显示手型图标的设置
- 实现点击桌面的一个图标打开多个选择画面
- 关于对话框最小化到托盘后,点击托盘图标后只在任务栏显示而无法还原窗口的解决方法。