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:'[e-mail]',
              sex:'男',
              bornDate:'1991-4-4'},
            {id:1,
              name:'小李',
              email:'[e-mail]',
              sex:'男',
              bornDate:'1992-5-6'},
          {id:1,
              name:'小兰',
              email:'[e-mail]',
              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>