如何改變 Extjs 的 listview 的 cursor types

如何將 Extjs 的 listview 的 cursor types 改為 default且移除滑鼠移上去時的hight light效果

先說明什麼是 cursor style好了，

cursor syle是一個CSS的property。當指定 style="cursor:default;" 時就會是一般的滑鼠游標，當指定 style="cursor:pointer;" 時就會是一個小手圖示。
詳情可以參考以下:http://www.w3schools.com/cssref/pr_class_cursor.asp


在說明一下什麼是 listview 好了，listview是Extjs中的 grid panel 前身，也就是它的功能和 grid panel是類似的，並且在extjs 4.0已經被合併到 gird panel裡面了。如果你指定以下這樣的code:http://dev.sencha.com/deploy/ext-3.4.0/examples/view/list-view.html你發現當滑鼠游標移過去的時候，會出現'小手'。這是因為某一個 css 發揮作用，必然是有某一層 css 的 style 設為 "cursor:pointer;"且你會發現滑鼠遊標移過去的地方會自動有'光棒'的效果(或是說highlight的效果)

方法一

How to fix it ?

先說如何移除當滑鼠移過去會出現hight light的效果。
在 listview 有一個欄位為 overClass 就是用來做當滑鼠移上去時 hight light這件事情。
因此我們可以把 overClass設為 空字串 '' 即可以消除high light效果。

另外如果想要移除當滑鼠移過去會出現小手的效果，我目前找到的方法是使用extjs的 XTemplate。

因為 listview有一個 tpl的欄位專門來存 XTemplate的 obj，
我們可以先按 F12 開 javascript的 debug mode，然後觀察 listview就可以看到在
tpl下面有一個 html的 property。

仔細觀察就可以發現就是 listview 目前的 table 狀態。
我們修改這個 property 內容就可以達到我們任何想要的外觀。
這邊有一篇不錯的內容:
http://www.cnblogs.com/lipan/archive/2011/12/12/2274740.html
看完應該就可以知道XTemplate如何使用。

但我們要的其實很單純，就是修改cursor style。
因此我們可以在debug mode把listivew的tpl的html這個property 的內容 copy一分下來，並且修改style部分改為 "style=cursor:default;"就可以達成我們的需求。

進一步延伸 (XTemplate)

看完上面說的這個link之後

http://www.cnblogs.com/lipan/archive/2011/12/12/2274740.html

應該就可以發現使用XTemplate就可以不被extjs的框架限制住，而達到很大的彈性，做我們想做的任何行為。
而缺點就是在javascript內內嵌 html的 code，可能會有maintain性不好的疑慮。

會了XTemplate似乎可以做出很多有趣的元件出來，這部分不是很懂，下回待續吧 : )

方法二

How to fix it ?

覆寫 listview 的 cls property 譬如叫 'my-style-no-cursor'

...

cls: 'my-style-no-cursor'

..

然後定義自己的 .css 如下

.my-style-no-cursor .x-list-body dt {

    cursor: default;

}

詳細解說:

當覆寫了 listview 的 cls ，在 browser的debug mode我們就可以看到 listview 會把這個css加入它的div class 裡面

當我們定義了 .my-style-no-cursor .x-list-body dt 這樣子的 selector 就會將這樣的style正確的套用到每個 dt 上。(browser 先選擇 .my-style-no-cursor然後是 .x-list-body 最後 dt tag)