[Ext]如何讓 ListView 的項目有邊框格線

ListView 是 Ext JS 3.0 新增的類似 GridPanel 的一個陽春級的組件。



從畫面來看是不是跟 GridPanel 就像是個孿生兄弟呢！不過 ListView 這弟弟的功能特性就少 GridPanel 哥哥少了許多。像是就少了是否有欄位分格線的 columnLines 屬性。

不過雖然沒提供，咱們還是能透過 CSS 來把它實做出來。先來看一下 ListView 的項目的結構：



我們可以發現到 ListView 是由 dl 及 dt 組成的，其中的內容更是再透過 em 來包裹。所以筆者就利用這樣的階層關係來設置 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