1.使用grid組件基本屬性bodysyle設(shè)置背景圖片

Bodysyle：用戶自定義CSS樣式被應(yīng)用到panel的body元素上

bodyStyle : {
                background : 'url(/工程名/resources/msxz/images/login/Main_bg1.jpg) no-repeat'
            },

應(yīng)用效果：組件空白背景被圖片替換，表頭及表單數(shù)據(jù)依舊被子容器背景遮蓋.

CSS-background用例：

#00FF00 規(guī)定使用背景顏色
url(bgimage.gif) 背景圖片
no-repeat 是否重復(fù)背景圖像
fixed 瀏覽器定位
top 圖片區(qū)域

BEBUG.png

2.使用grid組件基本屬性viewConfig設(shè)置數(shù)據(jù)行背景圖片

首先自定義一個(gè)CSS：

<style type="text/css"> 
tr.x-grid-back-tm .x-grid-cell {  
        background: url(../images/login/Grid_tm.png) top left no-repeat;  
        color:white;
}
</style>

注意：

1.背景圖片文件URL可能與上文中的不一致，這是由于相對(duì)路徑初始位置不一致導(dǎo)致的，可由調(diào)試器查看是否能夠成功預(yù)覽圖片判斷。
2.務(wù)必添加.x-grid-cell覆蓋grid本身的單元格樣式表，否則行tr背景將會(huì)被td背景所覆蓋.

viewConfig : {
                getRowClass : function(record, rowIndex, rowParams, store) {
                    return 'x-grid-back-tm';//重載行樣式表
                }
            }

用法：利用getRowClass屬性重寫這個(gè)函數(shù)在渲染時(shí)應(yīng)用自定義的CSS樣式.返回值為重載的CSS，如需調(diào)整指定行的樣式則需使用行數(shù)據(jù)或行序列號(hào)進(jìn)行判斷.

3.解決表頭背景問題

'afterrender' : function() {
     var elments = Ext.select(".x-column-header",true);
     elments.each(function(el) {  
    el.setStyle("color", 'white');  
    el.setStyle("background", 'url(/工程名/resources/msxz/images/login/Grid_tm.png.jpg) repeat');
     }, this);
}

用法：為grid組件添加'afterrender監(jiān)聽方法，使用EXT的select方法覆蓋grid組件自帶樣式表.x-column-header的內(nèi)容.

修改效果圖：

修改前.png

修改后.png