extjs3.3 实现复杂表头 和锁定列lockinggrird功能。

我在Extjs3.3的锁定列lockingrid的例子基础上，添加了复杂的表头功能，但直接报JS错误，不能展示grid了。



Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif'; 
  var structure = {
  Asia: ['Beijing', 'Tokyo'],
  Europe: ['Berlin', 'London', 'Paris']
  },
  products = ['ProductX', 'ProductY'],
  fields = [],
  columns = [{dataIndex: 'sss',header: 'sss'}];
  data = [],
  continentGroupRow = [],
  cityGroupRow = [];
  //构造数据
  function generateConfig(){
  var arr,
  numProducts = products.length;
   
  Ext.iterate(structure, function(continent, cities){
  Ext.each(cities, function(city){
  Ext.each(products, function(product){
  fields.push({
  type: 'int',
  name: city + product
  });
  columns.push({
  dataIndex: city + product,
  header: product,
  renderer: Ext.util.Format.usMoney
  });
  });
  arr = [];
  for(var i = 0; i < 20; ++i){
  arr.push((Math.floor(Math.random()*11) + 1) * 100000);
  }
  data.push(arr);
  });
  })
  }
   
  // Run method to generate columns, fields, row grouping
  generateConfig();
  //构造复杂表头
  continentGroupRow =[
  {},
  {header: 'Asia', colspan: 4, align: 'center'},
  {header: 'Europe', colspan: 6, align: 'center'}
  ];
  cityGroupRow = [
  {},
  {header: 'Beijing', colspan: 2, align: 'center'},
  {header: 'Tokyo', colspan: 2, align: 'center'},
  {header: 'Berlin', colspan: 2, align: 'center'},
  {header: 'London', colspan: 2, align: 'center'},
  {header: 'Paris', colspan: 2, align: 'center'}
  ]
  //ext3.3的自带插件
  var group = new Ext.ux.grid.ColumnHeaderGroup({
  rows: [continentGroupRow, cityGroupRow]
  });
   
  var fields = [
  {type: 'string', name: 'sss'},
  {type: 'int', name: 'BeijingProductX'},
  {type: 'int', name: 'BeijingProductY'},
  {type: 'int', name: 'TokyoProductX'},
  {type: 'int', name: 'TokyoProductY'},
  {type: 'int', name: 'BerlinProductX'},
  {type: 'int', name: 'BerlinProductY'},
  {type: 'int', name: 'LondonProductX'},
  {type: 'int', name: 'LondonProductY'},
  {type: 'int', name: 'ParisProductX'},
  {type: 'int', name: 'ParisProductY'}
  ];
  //ÌíŒÓcheckbox
  var sm = new Ext.grid.CheckboxSelectionModel();
  sm.lock();
// columns at this point is:
  var columns = [sm,
  {dataIndex: 'sss', header: 'Product',locked:true},
  {dataIndex: 'BeijingProductX', header: 'ProductX'},
  {dataIndex: 'BeijingProductY', header: 'ProductY'},
  {dataIndex: 'TokyoProductX', header: 'ProductX'},
  {dataIndex: 'TokyoProductY', header: 'ProductY'},
  {dataIndex: 'BerlinProductX', header: 'ProductX'},
  {dataIndex: 'BerlinProductY', header: 'ProductY'},
  {dataIndex: 'LondonProductX', header: 'ProductX'},
  {dataIndex: 'LondonProductY', header: 'ProductY'},
  {dataIndex: 'ParisProductX', header: 'ProductX'},
  {dataIndex: 'ParisProductY', header: 'ProductY'}
  ];
   
  var cm = new Ext.ux.grid.LockingColumnModel({
  columns:columns
  ,rows:[continentGroupRow, cityGroupRow]
  });
  var grid = new Ext.grid.GridPanel({
  renderTo: 'column-group-grid',
  title: 'Sales By Location',
  width: 1000,
  height: 400,
  store: new Ext.data.ArrayStore({
  fields: fields,
  data: data
  }),
  cm: cm,
  viewConfig: {
  forceFit: true
  },
  view: new Ext.ux.grid.LockingGridView()
  ,plugins: group //添加了这行就报JS错误了
  });
});


//
syncHeaderHeight : function(){} 
var hrow =Ext.fly(this.innerHd).child('tr',true);
对象为空 undifined.导致后面引用该对象时候hrow.style.height = 'auto'出错。
但不加这个插件，就没有问题，但是复杂表头就不能展示了。

求高手解决!

我前阵子也被这个问题弄烦了很久，实在弄不出我想要的那种表头，没办法直接用XTemplate做的。