1. 程式人生 > >extjs3樣式二:設定任意行顏色

extjs3樣式二:設定任意行顏色

extjs3,表格樣式單一,要求修改的參考下

方式一(推薦)統一設定行樣式(以灰白相間的樣式為例)

//xxx.css 樣式 該樣式在一個css檔案中,在index.jsp載入時匯入
.x-grid-gray-row {
	background-color:  #EEEEEE !important;
}

.x-grid-white-row {
	background-color: white !important;
}
//ProductView.js 

ProductView.prototype.grid = function() {
	var sm = new Ext.grid.CheckboxSelectionModel();
	var cm = new Ext.grid.ColumnModel({
		columns : [sm, new Ext.grid.RowNumberer(), ...此處省略.... ]})
 
  
 grid = new Ext.grid.GridPanel({
				store : store,
				trackMouseOver : true,
				disableSelection : false,
				loadMask : true,
				autoHeight : true,
				cm : cm,
				sm : sm,
				viewConfig : {
					forceFit : true,
					enableRowBody : false,
					showPreview : false,
                    //別的程式碼別看,行樣式為下面的程式碼塊 
					getRowClass: function(record, rowIndex, p, ds) {
						if(rowIndex%2==0){
							return "x-grid-gray-row";
						}else{
							return "x-grid-white-row";
						}
						
				  }//end 灰白相間行樣式 
				},
				
			});

    return grid;

};//end grid

方式二設定任意的行樣式(也可以指定某個特定單元格,這裡以灰白相間行為例)

//xxx.css 樣式 該樣式在一個css檔案中,在index.jsp載入時匯入
.x-grid-gray-row {
	background-color:  #EEEEEE !important;
}

.x-grid-white-row {
	background-color: white !important;
}
//

// 1 首先要獲取行號
/*顯示行號
  *CustomerView.js
  這裡返回的就是當前行號,第一行為 1
 */
CustomerView.getRowNumberer=function(obj){
	 return new Ext.grid.RowNumberer({
		align:'center',
//		header:'序號',
//		width:35,
		autoWidth:true,
		renderer:function(value,m,record,rowIndex,columnIndex,store){
			//預設第一行 rowIndex=0
			obj.rowIndex=rowIndex+1;
			obj.store = store;
			obj.columnIndex =columnIndex;
			obj.value = value;
			return '<div align="center" >'+(rowIndex+1)+'</div>';
		}
	});
};

// 2  

CustomerView.prototype.grid = function() {
	var sm = new Ext.grid.CheckboxSelectionModel();
	var ob = new Object(); //獲得行號
	var row = CustomerView.getRowNumberer(ob);//返回行
	var cm = new Ext.grid.ColumnModel({
		columns : [sm, row,
        		    
                   {
					header : '客戶編號',
					width : 110,
					dataIndex : 'customerNo',
					renderer:function(value,m){ //根據行號進行判斷,
     					if(ob.rowIndex % 2==0 ){
							m.css = "x-grid-gray-row";
							 
						}esle{
                            m.css = "x-grid-white-row";
                        }
					
						return value;
					}
				},
            
            ]})//end cm

    
    ...省略若干...

}