Question

I have just updated my program to use Ext JS 4.0.2a, from the previous 4.0.0. Some parts of my program break after the upgrade, and one of them is that the show/hide column option for the grid doesn’t display correctly. The screenshot below is how things render on my machine;

Notice that the column list renders on top of the page, and the list itself is empty.

I’m not sure if this is platform/browser specific, but I’m using Ubuntu Linux, and I get such error when running my program in Firefox and also Chromium.

The following is how my grid column is declared:

{
      xtype: 'gridcolumn',
      header: 'windspeed_max',
      sortable: true,
      width: 105,
      dataIndex: 'windspeed_max'
},

I did not include the ‘hideable’ option, as it defaults to true anyway, yet the problem still persist even after adding the ‘hideable’ option and set it to true. I’m not sure if this option has anything to do with the problem anyway.

The question is, how can I fix this problem, without falling back to Ext JS 4.0.0?

Answer 1

This is a bug, fix is to do the following as explained at: http://www.sencha.com/forum/showthread.php?138927-4.0.2a-Large-Ext.menu.Menu-incorrectly-shown-(Possible-fix)&p=620730&viewfull=1#post620730

I tested using Ext 4.0.2a version, and works..

In the Ext.menu.Menu.doConstrain function…
change:

...
delete me.height;
me.setSize();
full = me.getHeight();
...

To:

...
full = me.getHeight();
delete me.height;
me.setSize();
...