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";
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值