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:
Code:
var pnHeader = Ext.create('Ext.form.Panel', {id: 'pnHeader', width: 200, html: 'world' });
I then modified the grid as follow:
Code:
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...