實現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,就這么多。重新刷新一下你的頁面吧,看看效果,是不是看見那個讓我們日思夜想的小手啦。



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com