EXTJS4.1中Grid组件背景全透明解决方案

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：

注意：

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