Internet Explorer scrolling bug in grid (Ext.selection.CheckboxModel)

[extjs@kingsquare.nl]

The bug identified as EXTJSIV-3994 for the rowselectionmodel, exists in the checkboxselectionmodel too: Internet Explorer starts scrolling to another place on the document after a row is clicked. The can be resolved by removing the line

view.el.focus();

on line 195 of CheckboxModel.js

[scottmartin]

Please use the following template to report a bug:
http://www.sencha.com/forum/showthre...o-report-a-bug

Please include a small working example, or reference one of our online examples that can be used to replicate the problem.

Scott.

[extjs@kingsquare.nl]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1.0

Browser versions tested against:

• IE7
• IE8

DOCTYPE tested against:

• HTML5

Description:

• When a row is clicked, on a grid with the CheckBox SelectionModel, IE7 and IE8 scroll to another position on the page, where other browsers don't.

Steps to reproduce the problem:

• Get a grid on a page, with some rows and a CheckBox SelectionModel higher than the viewport.
• Click it in IE7 or IE8

The result that was expected:

• Row selected

The result that occurs instead:

• Row selected AND scrollbar position moved

Test Case:

http://reggino.kingsquare.nl/bugrepo...crollIssue.htm


HELPFUL INFORMATION

Possible fix:

• Removed view.el.focus(); from CheckboxModel.js . This seems to fix it

Operating System:

• Win 7

[extjs@kingsquare.nl]

ExtJS 4.1.3 still has this issue...

[kleins]

I'd like to second this report. The bug affects webkit Browsers, too. Here is some information in addition to the report already given by extjs@kingsquare.nl which I can fully confirm (including the simple fix).

This bug has already been reported in other threads, too:
http://www.sencha.com/forum/showthread.php?136401
http://www.sencha.com/forum/showthread.php?200008 (which seems to be closed, but this is still not fixed)

Ext version tested

• 4.1.3
• 4.2 beta

Browser versions tested against

• Chrome 24
• Safari 5.1.7

Steps to reproduce the problem
Create a window/panel with an absolute layout, place a grid with a checkbox selection model inside that is only partly visible. Select a row in the grid and observe how the grid scrolls partly off view. In more complex layouts than the one given in my testcase, it can even move the whole viewport partly off the screen thereby breaking the layout.

Grid before selection:
screenshot1.png

Grid after selection. Observe how the top of the grid scrolls off the visible area (this also happens with autoScroll set to false for the containing window/panel, only that then you cannot even reach the top of the grid anymore).
screenshot2.png
Testcase

Ext.onReady(function() {
    var win = Ext.create('Ext.window.Window', {
    	layout: 'absolute',
    	autoScroll: true,
    	height: 400,
    	width: 600,
    	items: {
			xtype: 'gridpanel',
			x: 10,
			y:10,
			width: 400,
			height: 500,
			selType: 'checkboxmodel',
			store: {
				data: [
			        {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
			        {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
			        {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
			        {"abbr":"AR","name":"Arkansas","slogan":"The Natural State"}
        		],
				fields: ['abbr','name'],
				proxy:{
					type:'memory',
					reader: {
						type: 'json',
						root: ''
					}
				}
			},
			columns: [{
				'dataIndex': 'name', 'text': 'Name'
			}]
    	}
    }).show();
});