实现extjs actioncolumn中点击图标 显示手型的偏方

可能很多小伙伴和我一样,会遇到一个很头疼的问题,那就是在使用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,就这么多。重新刷新一下你的页面吧,看看效果,是不是看见那个让我们日思夜想的小手啦。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值