ListView 是 Ext JS 3.0 新增的類似 GridPanel 的一個陽春級的組件。
從畫面來看是不是跟 GridPanel 就像是個孿生兄弟呢!不過 ListView 這弟弟的功能特性就少 GridPanel 哥哥少了許多。像是就少了是否有欄位分格線的 columnLines 屬性。
不過雖然沒提供,咱們還是能透過 CSS 來把它實做出來。先來看一下 ListView 的項目的結構:
我們可以發現到 ListView 是由 dl 及 dt 組成的,其中的內容更是再透過 em 來包裹。所以筆者就利用這樣的階層關係來設置 CSS:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 | /* 下框線 */ .x-list-body dl { border-bottom: 1px solid #D0D0D0; } /* 左框線 */ .x-list-body dl dt em { border-left: 1px solid #D0D0D0; } |
只是額外設定樣式後,我們的 ListView 也能有格線哩。
不過要小心的是,這樣是設定 border-left 的樣式,若是設定到 border-right 則會出現些許的偏差錯誤:
範例瀏覽:
http://demonstration.abgne.tw/extjs_3_x/tips/0001/0001.html
像miroko的整個站是不是都用Ext製作的??
我想應該是的..