extjs3樣式二:設定任意行顏色
阿新 • • 發佈:2018-12-22
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 ...省略若干... }