Extjs 控制 grid 行列的显示内容

最新推荐文章于 2021-07-06 09:37:23 发布

原创最新推荐文章于 2021-07-06 09:37:23 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

Extjs 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种在表格中自定义单元格显示格式的方法，包括如何将时间戳转换为可读的时间格式以及如何通过CSS设置特定列背景色。

{
           header : '发送时间',
           sortable : true,
           dataIndex : 'sendTime',
           width : 150,
           renderer : function(date) {
            return date  //这个date是一个时间戳
              ? new Date(parseInt(date))
                .toLocaleString()
              : '';
           }
          }

还可以改css

css代码

Java代码

.x-grid-back-red {
	background: #FF0000;
}

Js代码

{
			header : '分成类型',
			dataIndex : 'divideType',
			renderer : function(v,m){
				m.css='x-grid-back-red';
				return v;
			},
			width : 60
		}

或者直接这样写也可以

Js代码

{
			header : '编号',
			dataIndex : 'fcId',
			css : 'background: #FF0000;',
			width : 40
		}

改变行的css

.x-grid-record-red table{
color: #FF0000;
}

viewConfig : {
    forceFit : true,
    getRowClass : function(record,rowIndex,rowParams,store){
     //禁用数据显示红色
     if(record.data.zt==0){
      return 'x-grid-record-red';
     }else{
      return '';
     }

    }
   },