Results 1 to 3 of 3

Thread: [4.1.0] Grouping, Locked Column Grid with Anchors has Incorrect Height Rows in IE9

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    158

    Default [4.1.0] Grouping, Locked Column Grid with Anchors has Incorrect Height Rows in IE9

    REQUIRED INFORMATION
    Ext version tested:
    • ExtJS 4.1.0
    Browser versions tested against:
    • IE9 (Browser IE9, Document IE9 standards)
    Description:
    • I have a grid with grouping and locked columns.
    • The renderer for the column that's locked returns the value with an anchor tag around it.
    • After a few rows, the height of the row increases by 1 pixel.
    • This is throwing off the alignment to rows in the unlocked grid.
    Steps to reproduce the problem:
    • Run the code below in IE9 with Browser Mode IE9 and Document Mode IE9 standards.
    The result that was expected:
    • It would look like Chrome and be correct.
    The result that occurs instead:
    • Nope.
    Test Case:
    Code:
     
    Ext.create("Ext.window.Window", {
    	width:500,
    	height:500,
    	layout:"fit",
    	items:[
    		{
    			xtype:"grid",
    			store:{
    				proxy:{
    					type:"memory",
    					reader:{
    						type:"json"
    					}
    				},
    				model:Ext.define("MyModel", {
    					extend:"Ext.data.Model",
    					fields:[
    						"group",
    						"name",
    						"a",
    						"b",
    						"c",
    						"d",
    						"e",
    						"f",
    						"g"
    					]
    				}) && "MyModel",
    				data:[
    					{
    						group:"Group 1",
    						name:"Item 1",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 1",
    						name:"Item 2",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 1",
    						name:"Item 3",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 1",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 2",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 3",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 4",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 5",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 6",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 7",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 8",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 9",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 10",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 11",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 12",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 13",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 14",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 15",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 16",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 17",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 18",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 19",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 20",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 21",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 22",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 23",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 24",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 25",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 26",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 27",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 28",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 29",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 30",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 31",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 32",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 33",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 34",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 35",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 36",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 37",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 38",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 39",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					}
    				],
    				groupers:[
    					{
    						property:"group"
    					}
    				]
    			},
    			columns:[
    				{
    					text:"Name",
    					dataIndex:"name",
    					locked:true,
    					renderer:function(inValue)	{
    						return "<a href='javascript:void(0);'>" + inValue + "</a>";
    					}
    				},
    				{
    					text:"A",
    					dataIndex:"a"
    				},
    				{
    					text:"B",
    					dataIndex:"b"
    				},
    				{
    					text:"C",
    					dataIndex:"c"
    				},
    				{
    					text:"D",
    					dataIndex:"d"
    				},
    				{
    					text:"E",
    					dataIndex:"e"
    				},
    				{
    					text:"F",
    					dataIndex:"f"
    				},
    				{
    					text:"G",
    					dataIndex:"g"
    				}
    			],
    			features:[
    				{
    					ftype:"grouping"
    				}
    			]
    		}
    	]
    }).show();
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    May 2009
    Posts
    158

    Default

    The height of the .x-grid-cell TDs is 19.14 px in IE9, but only 19px in Chrome. I was able to create a style to fix it to 19px, but this is not the most correct approach.

  3. #3
    Sencha User
    Join Date
    May 2009
    Posts
    158

    Default

    I don't think it's necessarily related to the anchor tag. When I used the following code to force my A column to be on multiple lines, IE did not change the height of the locked row to match the height of the unlocked row.

    Code:
    Ext.create("Ext.window.Window", {
    	width:500,
    	height:500,
    	layout:"fit",
    	items:[
    		{
    			xtype:"grid",
    			store:{
    				proxy:{
    					type:"memory",
    					reader:{
    						type:"json"
    					}
    				},
    				model:Ext.define("MyModel", {
    					extend:"Ext.data.Model",
    					fields:[
    						"group",
    						"name",
    						"a",
    						"b",
    						"c",
    						"d",
    						"e",
    						"f",
    						"g"
    					]
    				}) && "MyModel",
    				data:[
    					{
    						group:"Group 1",
    						name:"Item 1",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 1",
    						name:"Item 2",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 1",
    						name:"Item 3",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 1",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 2",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 3",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 4",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 5",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 6",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 7",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 8",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 9",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 10",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 11",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 12",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 13",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 14",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 15",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 16",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 17",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 18",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 19",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 20",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 21",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 22",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 23",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 24",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 25",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 26",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 27",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 28",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 29",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 30",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 31",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 32",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 33",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 34",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 35",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 36",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 37",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 38",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					},
    					{
    						group:"Group 2",
    						name:"Item 39",
    						a:"a",
    						b:"b",
    						c:"c",
    						d:"d",
    						e:"e",
    						f:"f",
    						g:"g"
    					}
    				],
    				groupers:[
    					{
    						property:"group"
    					}
    				]
    			},
    			columns:[
    				{
    					text:"Name",
    					dataIndex:"name",
    					locked:true
    				},
    				{
    					text:"A",
    					dataIndex:"a",
    					renderer:function(inValue)	{
    						return inValue + "<br>" + inValue + "<br>" + inValue + "<br>" + inValue;
    					}
    				},
    				{
    					text:"B",
    					dataIndex:"b"
    				},
    				{
    					text:"C",
    					dataIndex:"c"
    				},
    				{
    					text:"D",
    					dataIndex:"d"
    				},
    				{
    					text:"E",
    					dataIndex:"e"
    				},
    				{
    					text:"F",
    					dataIndex:"f"
    				},
    				{
    					text:"G",
    					dataIndex:"g"
    				}
    			],
    			features:[
    				{
    					ftype:"grouping"
    				}
    			]
    		}
    	]
    }).show();
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •