extjs6 表格行选中时去掉默认背景颜色

extjs表格 默认选中的时候行背景色会是蓝色,或者其他可以通过sass修改,但是如果你不想要全部的表格都是统一修改成其他颜色,而只要个别表格样式修改,那个就得针对那个表格做配置,我的做法可能比较曲折,但是可以实现效果。采用的是自定义行样式,改成白色#fff,但是为了鼠标移进行的时候有颜色,我还写了鼠标移进和移出事件。
例子中的表格是多选:

selModel: {
    selectRow: true,
    injectCheckbox: 0,
    mode: "MULTI", //"SINGLE"/"SIMPLE"/"MULTI"
    checkOnly: true //只能通过checkbox选择
},
selType: "checkboxmodel",

表格事件:

listeners: {
    afterrender: function(grid, eOpts) {
        grid.getSelectionModel().selectAll();//假如我在表格渲染完成的时候就选中所有
    },
    itemmouseenter:function(view,record,item,index,a,b){//鼠标移进,显示颜色
        view.getRow(index).style.backgroundColor="#CEDBEF";
    },
    itemmouseleave:function(view,record,item,index){//鼠标移出,显示白色
        view.getRow(index).style.backgroundColor="#fff";
    }
},

我们修改每行的样式,改成自定义的:

viewConfig:{
    getRowClass:function(record, rowIndex, rowParams, store){    
            return 'x-grid-record-white';
    }
},

样式可以放在html文件里:

<style>
    .x-grid-record-white{
        background: #fff;
}
</style>

另一种方法也可以添加select方法,在select方法里修改背景颜色,同样配合鼠标移进移出事件:

select:function(rowmodel,record,index){
    rowmodel.view.getRow(index).style.backgroundColor="#fff";
}

但是测试时该事件在初始全部选中的时候,无法获取到行对象(应该是数据还没 加载),所以大家如果采用这个方法时,也可以先试下。

猜你喜欢

转载自blog.csdn.net/cookysurongbin/article/details/51516612