First, I am *not* referring to the column headers, but to the option to define a header for the grid itself, using the header: parameter.

I had this working at one point so I know it's possible, but the project I was working on has undergone a lot of changes and is complex, so not knowing why it wasn't working I decided to start again with a simple example to confirm it worked as I expected.

So, I opened up the Sencha Grid Example that comes with Ext 4.1 called 'Basic Array Grid'. Opening array-grid.js I added the following panel right before the grid:

var pnHeader = Ext.create('Ext.form.Panel', {id: 'pnHeader', width: 200, html: 'world' });
I then modified the grid as follow:

 var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        collapsible: true,
        multiSelect: true,
        stateId: 'stateGrid',
        header: pnHeader,
        columns: [
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
//  AND SO ON... again, I just dropped this into the stock ext 4.1 example
When I run it I get the following error: TypeError: el is undefined

If I removed the header: pnHeader the error goes away and the grid loads.

Interestingly in my larger project, I get no errors at all, it just doesn't display, so I figured I would step back to a simple set of code and test the header parameter there...

Any help would be appreciated, I can't find anything about this parameter except the sencha docs which only have a single sentence describing its usage and in searching the sencha docs returns only information on column headers...