View Full Version : overHeader is undefined in gridpanel

30 May 2012, 3:34 AM
Hi guys,

This bug was said to be fixed on this thread (http://www.sencha.com/forum/showthread.php?131619-quot-overHeader.isOnLeftEdge-is-not-a-function-quot-after-calling-grid.reconfigure()/page2&highlight=overheader) though i'm still having the issue. (I'm using last version available today : Ext 4.1.0)
Below is my gridpanel code. This issue appears when I hover my mouse on any column header on my grid.

Ext.create('Ext.grid.GridPanel', {
title:'Liste des scripts',
{ header:'Nom', dataIndex:'name', resizable: false },
{ header:'Date de création', dataIndex:'dateCreate', renderer:function(value){return Ext.Date.format(new Date(value), 'Y-m-d');}},
{ header:'Etat', dataIndex:'state.status' }
fields:['name', 'dateCreate', 'state.status'],
url:'<c:url value="/web/ScriptList/list.json" />',

The error is : overHeader is undefined
Thrown by this piece of code in ext-all-debug-4.1.0 :

if (overHeader.isOnLeftEdge(e)) {
resizeHeader = overHeader.previousNode('gridcolumn:not([hidden]):not([isGroupHeader])')

if (resizeHeader) {

ownerGrid = me.headerCt.up('tablepanel');
resizeHeaderOwnerGrid = resizeHeader.up('tablepanel');

if (!((resizeHeaderOwnerGrid === ownerGrid) || ((ownerGrid.ownerCt.isXType('tablepanel')) && ownerGrid.ownerCt.view.lockedGrid === resizeHeaderOwnerGrid))) {
resizeHeader = null;

Thanks for any help / fixing the issue !

30 May 2012, 5:31 AM
Any suggestions as to how I could reproduce this in examples/grid/array-grid.html?

30 May 2012, 6:29 AM
Well, I have just tested it with the grid example code, I have the exact same behavior as on my own grid...
I have copy-pasted the example code into my application. The only modifications I made are these :
- Removed Ext.onReady function around the grid creation (i'm loading the code dynamically into a panel, through the update method, with the loadScript parameter set to true)
- Removed the renderTo config
- Added this at the end :
Ext.getCmp('scriptsTab').add(grid); to add the grid to my tab.

Does this help ?

30 May 2012, 6:39 AM
Loading the code dynamically? "into" something????

So you are doing an Ajax call and evaling some code?

WHy not just... execute some code to add a grid to a Container? (A Container with a layout)

30 May 2012, 6:41 AM
If you have to do this kind of thing, look at examples/component-loader/component-loader.html to see how to load a Component

30 May 2012, 6:52 AM
Yeah I'm loading content dynamically. This is a requirement of my project...
My application viewport is contains a tabpanel. Each of its tab has its content loaded when a click on the tab item button is performed. So each tab has this method :

getTabContent:function (url, tabToUpdate) {
success:function (response) {
tabToUpdate.update(response.responseText, true);

The response contains an html page with the javascript code provided in my first post.
This works find and the grid loads properly. The only issue is with the mouseover on column's header...

30 May 2012, 7:08 AM
And i can't actually find the example you're referring to... I get this from the sencha docs :

Example #!/example/component-loader/component-loader.html was not found

and when I put a "s" at examples, it simply redirects on the home page of the examples.

And i can't find it on google. Do you have the full url please ?


30 May 2012, 9:54 AM
It should be in your SDK in the examples directory.

On-line version here: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/component-loader/component-loader.html

31 May 2012, 2:07 AM
Thanks for the pointer, it actually replace nicely the Ajax.request, but I get the exact same error on the headers of the grid...

My loader looks like this :

loadMask: true,
removeAll: true,
renderer: 'html',
success: function(loader, response){
loader.getTarget().update(response.responseText, true);

And I call it from the activate event of my tab :

activate:function (tabRef) {

The grid code has not changed.

Any idea Animal ?

31 May 2012, 3:22 AM
The whole point about a ComponentLoader is that you don't update any elements. And there's no HTML involved.

You do not want an HTML renderer, you want a Component renderer. What is coming back from the server is not HTML. It is a Javascript expression which evaluates to a Component.