1.使用grid组件基本属性bodysyle设置背景图片
Bodysyle：用户自定义CSS样式被应用到panel的body元素上
bodyStyle : {
background : 'url(/工程名/resources/msxz/images/login/Main_bg1.jpg) no-repeat'
},
应用效果：组件空白背景被图片替换，表头及表单数据依旧被子容器背景遮盖.
CSS-background用例：
#00FF00 规定使用背景颜色
url(bgimage.gif) 背景图片
no-repeat 是否重复背景图像
fixed 浏览器定位
top 图片区域
BEBUG.png
2.使用grid组件基本属性viewConfig设置数据行背景图片
首先自定义一个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可能与上文中的不一致，这是由于相对路径初始位置不一致导致的，可由调试器查看是否能够成功预览图片判断。
2.务必添加.x-grid-cell覆盖grid本身的单元格样式表，否则行tr背景将会被td背景所覆盖.
viewConfig : {
getRowClass : function(record, rowIndex, rowParams, store) {
return 'x-grid-back-tm';//重载行样式表
}
}
用法：利用getRowClass属性重写这个函数在渲染时应用自定义的CSS样式.返回值为重载的CSS，如需调整指定行的样式则需使用行数据或行序列号进行判断.
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监听方法，使用EXT的select方法覆盖grid组件自带样式表.x-column-header的内容.
修改效果图：
修改前.png
修改后.png
