Ext 中Ext.grid.GridPanel樣式設定
一:修改頭樣式
1:直接修改樣式
監聽gridpanel的'afterrender' 事件
listeners : {
'afterrender' : function(){
var elments = Ext.select(".x-grid3-header");//.x-grid3-hd
elments.each(function(el) {
el.setStyle("background-color", '#CBBC82');// 設定不同的顏色
el.setStyle("background-image", 'none');
}, this) ;
}
}
2:修改viewConfig的模板
var viewConfig={
templates:{
// 在模板中引入自己定義的樣式。使用這個view的grid的header的樣式就修改了。
header:new Ext.Template(
' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
' <thead> <tr id="my-grid-head">{mergecells} </tr>' +
' <tr id="x-grid3-hd-row">{cells} </tr> </thead>',
" </table>"
),
mhcell: new Ext.Template(
' <td id="myrow" colspan="{mcols}"> <div align="center"> <b>{value} </b> </div>',
" </td>"
)
}
};
grid.view=new Ext.grid.GridView(viewConfig);
二:修改列樣式
{
header : 'Last Updated',
width : 85,
align : 'center',
css:'height:27px; vertical-align:middle; font-size:12;color:red;',
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
如果需要修改所有行的樣式可以使用columnModel的default屬性設定css屬性值
var cm = new Ext.grid.ColumnModel({
defaults: {
css : 'height:27px; vertical-align:middle; font-size:12;background-color :#EDEEF0;background- image:none;'
},
columns:[]
})
這樣就改變整個grid的行列的樣式
2:載入資料時改變列的顏色
首先定義一個樣式如下
.x-grid-back-red {background: #FF0000;}
定義改變顏色的列:
{header:'摘要',dataIndex:'zhaoyao',align:'left',width:150,renderer : function(v,m){
m.css='x-grid-back-red';
return v;
}
}
三:修改行樣式
1:指定某一行的背景色,滑鼠移過行的背景色以及選中行的背景色設定
使用gridView屬性的設定這些樣式,首先定義好樣式
viewConfig : {
rowOverCls : 'my-row-over',//滑鼠移過的行樣式
selectedRowClass : "my-row-selected",//選中行的樣式
getRowClass : function(record,rowIndex,rowParams,store){ //指定行的樣式
if(rowIndex ==2){
return "my-row";
}
}
}
2:載入資料完成後呼叫方法改變行的顏色
首先要解決的一個問題是如果判斷資料已經載入完畢,最簡單的方法是給grid的store新增onload事件。
如果你想有條件地改變某行的背景顏色,則還需要遍歷gird的store,這裡有個簡單的方法即store的
each方法。
grid.getStore().on('load',function(s,records){
var girdcount=0;
s.each(function(r){
if(r.get('zy')=='本期合計'){
grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';
}elseif(r.get('zy')=='本年累計'){
grid.getView().getRow(girdcount).style.backgroundColor='#FF1493';
}elseif(r.get('zy')=='期初餘額'){
grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC';
}
girdcount=girdcount+1;
});
});
通過這些樣式的自定義可以修改grid的行高,字型背景色等屬性啦。