ExtJs grid自定义表头

给表头添加样式或图片
header:' <div style='ddd'>姓名 </div>'

。js
MyGridView=Ext.extend(Ext.grid.GridView,{
renderHeaders : function(){
var cm = this.cm, ts = this.templates;
var ct = ts.hcell,ct2=ts.mhcell;

var cb = [], sb = [], p = {},mcb=[];
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
p.id = cm.getColumnId(i);
p.value = cm.getColumnHeader(i) || "";
p.style = this.getColumnStyle(i, true);
if(cm.config[i].align == 'right'){
p.istyle = 'padding-right:16px';
}
cb[cb.length] = ct.apply(p);
if(cm.config[i].mtext)mcb[mcb.length]=ct2.apply({value:cm.config[i].mtext,mcols:cm.config[i].mcol});
}
var s=ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';',mergecells:mcb.join("")});
return s;
}
});
viewConfig={
templates:{
header:new Ext.Template(
' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
' <thead> <tr class="x-grid3-hd-row">{mergecells} </tr>' +
' <tr class="x-grid3-hd-row">{cells} </tr> </thead>',
" </table>"
),
mhcell: new Ext.Template(
' <td class="x-grid-cell" colspan="{mcols}"> <div align="center"> <b>{value} </b> </div>',
" </td>"
)
}
};
Ext.onReady(function(){
var data=[{id:1,
name:'小王',
email:'xiaowang@easyjf.com',
sex:'男',
bornDate:'1991-4-4'},
{id:1,
name:'小李',
email:'xiaoli@easyjf.com',
sex:'男',
bornDate:'1992-5-6'},
{id:1,
name:'小兰',
email:'xiaoxiao@easyjf.com',
sex:'女',
bornDate:'1993-3-7'}
];
var store=new Ext.data.JsonStore({
data:data,
fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
});
var colM=new Ext.grid.ColumnModel([{
header:"姓名",
mtext:"基本信息",
mcol:2,
dataIndex:"name",
sortable:true,
editor:new Ext.form.TextField()},
{header:"性别",
dataIndex:"sex",
editor:new Ext.form.ComboBox({transform:"sexList",
triggerAction: 'all',
lazyRender:true})
},
{header:"出生日期",
dataIndex:"bornDate",
mtext:"其它信息",
mcol:2,
width:120,
renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
editor:new Ext.form.DateField({format:'Y年m月d日'})},
{header:"电子邮件",
dataIndex:"email",
sortable:true,
editor:new Ext.form.TextField()}
]);
var grid = new Ext.grid.EditorGridPanel({
renderTo:"hello",
title:"学生基本信息管理",
height:200,
width:600,
cm:colM,
store:store,
view:new MyGridView(viewConfig),
autoExpandColumn:3
});
});


.jsp

<div id="box"> </div>
<div id="hello"> </div>
<select name="sexList" id="sexList" style="display: none;">
<option>男 </option>
<option>女 </option>
</select>