Home » Ext JS 技巧

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

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



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

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



我們可以發現到 ListView 是由 dldt 組成的,其中的內容更是再透過 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

2 筆針對 [Ext]如何讓 ListView 的項目有邊框格線 的迴響

發表迴響