IE bug at EXt.menu.Menu on tree panel using Ext 4.0.2a

[mxu]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.0.2arev

Browser versions tested against:

• IE8
• FF3 (firebug 1.3.0.10 installed)

Description:

• IE 8.* the error msg
  ////////////////////////////////////////////////////////////////////////////////////////////////
  User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; InfoPath.3; .NET4.0E)
  Timestamp: Thu, 21 Jul 2011 18:01:01 UTC
  
  
  Message: 'undefined' is null or not an object
  Line: 121438
  Char: 9
  Code: 0
  URI: http://flexo/projects/SNP/mxu/GaPBro...-w-comments.js
  
  Ext.define('Ext.menu.Menu', {
  ...
  lookupComponent: function(cmp) {
  var me = this;
  
  if (Ext.isString(cmp)) {
  cmp = me.lookupItemFromString(cmp);
  } else if (Ext.isObject(cmp)) {
  cmp = me.lookupItemFromObject(cmp);
  }
  
  // Apply our minWidth to all of our child components so it's accounted
  // for in our VBox layout
  cmp.minWidth = cmp.minWidth || me.minWidth; /// Line: 121438
  
  return cmp;
  },
  ...
  ]

Steps to reproduce the problem:
The result that was expected:
The result that occurs instead:

• foo
• bar

Test Case:

    <<insert working code to reproduce the report >>
/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact:  http://www.sencha.com/contact

GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.require([
    'Ext.tree.*',
	'Ext.menu.*',
    'Ext.data.*',
    'Ext.window.MessageBox'
]);

Ext.onReady(function() {
	//getContextMenu();
	
    var store = Ext.create('Ext.data.TreeStore', {
									root: {
										text: 'Content',
										expanded: true,
										children: [
										  {
														text: "To Do", 
														cls: "folder",
														expanded: true,
														children: [{
																			text: "Go jogging",
																			leaf: true,
																			checked: true
																		},{
																			text: "Take a nap",
																			leaf: true,
																			checked: false
																		}
																		,{
																			text: "Climb Everest",
																			leaf: true,
																			checked: false
																		}
																	]
														}
										
										] 
									}
									 
    });

    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: true,
        useArrows: true,
        frame: true,
        title: 'Check Tree',
        renderTo: 'tree-div',
        width: 200,
        height: 250,
        dockedItems: [{
            xtype: 'toolbar',
            items: {
                text: 'Get checked nodes',
                handler: function(){
                    var records = tree.getView().getChecked(),
                        names = [];
                    
                    Ext.Array.each(records, function(rec){
                        names.push(rec.get('text'));
                    });
                    
                    Ext.MessageBox.show({
                        title: 'Selected Nodes',
                        msg: names.join('<br />'),
                        icon: Ext.MessageBox.INFO
                    });
                }
            }
        }]
    });
	
				  tree.on('itemcontextmenu', onATreeContextMenu, tree);
				  
});

var _contextMenu_ = null;
function getContextMenu(){
	if(!_contextMenu_){
		
		_contextMenu_ = Ext.create('Ext.menu.Menu', {
		       //width: 100,
				//height: 100,
				//margin: '0 0 10 0',
	           floating: true,  // usually you want this set to True (default)
			  renderTo: Ext.getBody(),  // usually rendered by it's containing component
			  indent: true,
			 items:[
					{text: 'Some Entry for ', iconCls: 'icon-publicdata-node'},
					{text: 'Another Entry ' ,iconCls: 'icon-ncbi-node'},                    
				]
		});
	}
	return _contextMenu_ ;
}

function onATreeContextMenu(view, n, item, index, e){
	window.status = "entering hanlder: " + e.getXY() + ':  node: ' + n.data.id;

	getContextMenu().showAt( e.getXY());    

	e.stopEvent();
	return false;
}

HELPFUL INFORMATION


Screenshot or Video:

• attached

See this URL for live test case: http://


Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css
• custom css (include details)

Operating System:

• win7
• WinXP Pro

[mike.estes]

This is not a bug in the library, the second item you are adding the the context menu ({text: 'Another Entry ' ,iconCls: 'icon-ncbi-node'}) has a trailing comma, this will cause problems in IE browsers but not other browsers. use jslint to help catch these things.

[mxu]

thanks

mxu