Ext.grid.header is undefined

[isaac.zhao]

Hi,
This is my code of a simple grid.
Ext.define('CMD.view.HomeTabGrid', {
extend: 'Ext.grid.Panel',
flex: 2,
title: 'offering',
id : 'homeTabGrid',
loadMask : {
text : 'Loading...'
},
initComponent: function(){
this.columns= [
{
text : 'ID',
flex : 1,
sortable : true,
dataIndex: 'id',
hidden :true
},
{
text : 'Title / Description',
flex :5,
sortable : true,
dataIndex: 'title'
},{
text : 'Categories',
flex : 5,
sortable : true,
dataIndex: 'category'
},

{
text : '<b>Status</b>',
flex : 2,
sortable : true,
dataIndex: 'status'
}
];
this.store=Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['id', 'title', 'category','status'],
data:{'items':[
{ 'id': '1', "title":"abc", "category":"movie" ,"status":"SUCCESS" },
{ 'id': '2', "title":"abc", "category":"movie" ,"status":"SUCCESS" },
{ 'id': '3', "title":"abc", "category":"movie" ,"status":"SUCCESS" },
{ 'id': '4', "title":"abc", "category":"movie" ,"status":"SUCCESS" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
this.callParent(arguments);
}
});
But I get an ‘Ext.grid.header is undefined’ error, can anyone tell me what's wrong?
Thanks in advance.

[friend]

Your code sample worked fine for me on FireFox v13 and I.E. 9.

Is your code failing on construction or are you trying to manipulate the grid from some other piece of code and that's failing?