1. 程式人生 > >Extjs4 行顏色改變

Extjs4 行顏色改變

css 定義

<style type="text/css">
.row-0 .x-grid-cell{
    background-color : pink !important;
}
.row-1 .x-grid-cell{
    background-color: green !important;
}
.row-2 .x-grid-cell{
    background-color: red !important;
}
</style>


grid的程式碼

signinPatchGrid = Ext.create('Ext.grid.Panel',{
			id:'signinPatchGrid',
			store:signinpathStore,
			region:'center',
			columnLines: true,
			loadMask: true,
			height : '60%',	
			selModel: { selType: 'checkboxmodel',mode : 'SIMPLE' },   //選擇框
			tbar:[
			        //判斷是學生角色
					<c:if test="${button=='CMD'}">
					{text:'新增',iconCls:'create',handler:function(){
							formPanel.show();
					}
					},"-",
					{text:'修改',id:'modify',iconCls:'modify',handler:editForm},"-",
					{text:'刪除',iconCls:'remove'},
					</c:if>
					{xtype:'tbfill'},
					{text:"搜尋",iconCls:"search",handler:function(){
		            	 var params = {};
		             }
					}
            	],
             // 根據某列進行 改變行的顏色
             viewConfig:{
            	//enableTextSelection: 'true',
            	getRowClass:function(record,index,rowParam,store){
            		var status = record.get('STATUS');
            		if(status == "0"){
            			return 'row-0';
            		}else if(status == "1"){
            			return 'row-1';
            		}else{
            			return 'row-2';
            		}
            	}
             },
			 columns:[
					{xtype: 'rownumberer'},//顯示序號
			        {dataIndex:'UUID',width:100,text:'uuid',hidden:true},
			        {dataIndex:'STATUS',width:100,text:'狀態',align:'center',renderer:function(v,r,s){
			        	return code2Name(v,status);
			        }},
					{dataIndex:'TITLE',width:120,text:'標題'},
					{dataIndex:'PATCH_TYPE',width:80,text:'型別',align:'center',renderer:function(v,r,s){
						return code2Name(v,patchType);
					}},
					{dataIndex:'PATCH_COURSE',text:'課程uuid',hidden:true},
					{dataIndex:'PLANTITLE',width:200,text:'所在課程表',renderer:function(v, metaData, record, rowIndex, columnIndex, store){
						var val = v + "</br>" + record.get('TEACHINGWEEK') + " 上課日期:" + record.get('COURSEDATE') + "(" +record.get('WEEK') + ")";
						metaData.tdAttr = ' data-qtip="' + val + '"';    // 懸浮提示設定
						return v;
					}},
					{dataIndex:'PATCH_REASON',width:160,text:'原因'},
					{dataIndex:'PATCH_ACCOUNTID',width:100,text:'申請人uuid',align:'center',hidden:true},
					{dataIndex:'CREATOR',width:80,text:'申請人'},
					{dataIndex:'PATCH_TIME',width:160,text:'申請時間'},
					{dataIndex:'AUDIT_CCOUNTID',width:100,text:'稽核人',renderer:function(v,r,s){
						return code2Name(v,teacherArr);
					}},
					{dataIndex:'AUDIT_TIME',width:160,text:'稽核時間'},
					{dataIndex:'CREATE_TIME',width:160,text:'建立時間'}
					],
			bbar: [{
                xtype: 'pagingtoolbar',
                store: signinpathStore,
                displayMsg: '顯示 {0} - {1} 條,共計 {2} 條',
                emptyMsg: "沒有資料",
                beforePageText: "當前頁",
                afterPageText: "共{0}頁",
                displayInfo: true                 
            }]
		});

效果圖片: