1. 程式人生 > >extjs更改grid行高度

extjs更改grid行高度

遇到一個需求,extjs的grid中有個列是圖片,顯示高度較大,結果grid被撐的很難看,我就想著能不能改變grid的行高度

其實改變extjs的樣式只需改變ext-all.css就行了,但如果改變了ext-all.css,那所有頁面的樣式都被改變了,那怎麼辦呢?

我們可以利用css的覆蓋原則,用firebug檢視原始碼的工具找到對應的class樣式名稱,在ext-all.css中找到,然後把這段css程式碼複製到我們的jsp中,

這樣就可以在當前頁面中覆蓋ext-css的樣式

如下,可以改變grid的行高

.x-grid-row td,.x-grid-summary-row td{
	line-height:50px;  //控制GRID高度
	vertical-align:top; //垂直居中
	border-right: 1px solid #eceff6 !important;//控制列線
	border-top: 1px solid #eceff6 !important;//控制行線
}

改變圖示也是這個思路,
.add{background-image:url(images/extjs/add.png) !important;}
.del{background-image:url(images/extjs/delete.png) !important;}
.update{background-image:url(images/extjs/update.png) !important;}
如要改變按鈕的圖示就可以通過iconCls屬性,iconCls='add'