Ext version tested:
  • Ext 3.2.0

Adapter used:
  • ext

css used:
  • only default ext-all.css

Browser versions tested against:
  • IE7
  • FF3.6
  • Google Chrome

Operating System:
  • WinXP Pro

  • If you click on the column header for one of the columns in the grid IE7 throws an error

Test Case:
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>Title</title>
        <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <!-- overrides to base library -->
        <!-- ** Javascript ** -->
        <!-- base library -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript">
			// sample static data for the store
			var myData = [
				['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
				['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
				['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
				['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
				['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
				['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
				['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
				['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
			 * Custom function used for column renderer
			 * @param {Object} val
			function change(val){
				if(val > 0){
					return '<span style="color:green;">' + val + '</span>';
				}else if(val < 0){
					return '<span style="color:red;">' + val + '</span>';
				return val;
			 * Custom function used for column renderer
			 * @param {Object} val
			function pctChange(val){
				if(val > 0){
					return '<span style="color:green;">' + val + '%</span>';
				}else if(val < 0){
					return '<span style="color:red;">' + val + '%</span>';
				return val;
			// create the data store
			var store = new Ext.data.SimpleStore(
					fields: [
						{name: 'company'},
						{name: 'price', type: 'float'},
						{name: 'change', type: 'float'},
						{name: 'pctChange', type: 'float'},
						{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
			// manually load local data
			// create the Grid
			var grid = new Ext.grid.GridPanel(
					store: store,
					columns: [
						{id:'company',header: 'Company', width: 160, sortable: true},
						{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
						{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
						{header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
						{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), 		dataIndex: 'lastChange'}
					stripeRows: true,
					autoExpandColumn: 'company',
					height: 350,
					width: 600,
					title: 'Array Grid',
					stateful: true,
					stateId: 'grid'       
			// render the grid to the specified div in the page
		GridPanel is:
		<div id="grid-example" style="width:100%;"></div>
Steps to reproduce the problem:
  • Click on down arrow next to Change column header

The result that was expected:
  • Drop down to appear with no errors

The result that occurs instead:
IE7 throws error "Microsoft JScript runtime error: Object doesn't support this property or method" on line 332 in ext-all-debug.js
                range = el.ownerDocument.createRange();
From what I can tell ownerDocument does not have the createRange() method. The el at that point is the Text node "Grid Panel:", changing the HTML to wrap the "Grid Panel:" in a set of tags causes the error to disappear. I have to admit this isn't a big issue, we just happened to stumble across it while playing today.[/LIST]