PDA

View Full Version : Grid scrolls to the top on row click, but only in IE 9. Bug?



igoberman
13 Mar 2013, 5:41 AM
Greetings,
I have a grid with 'gridviewdragdrop' plugin to enable drag and drop. I positioned the grid in hbox layout (potentially need to have several grids next to each other, so I have to use hbox) and populated it with enough rows to have a vertical scroll.
Works fine on FF. But on Chrome and IE 9, if I scroll to the bottom and click on a row, the grid scrolls to the top for some reason. I have also noticed that if I do not use 'gridviewdragdrop' plugin (or hbox layout), the problem does not happen. So it is just combination of hbox layout and 'gridviewdragdrop' plugin that cause it, but only with IE and Chrome.
I believe it is a bug, but is there some workaround for it? Any help is appreciated. The code is below:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.1a-gpl/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.1a-gpl/ext-all-dev.js"></script>


<script type="text/javascript">


Ext.define('DataObject', {
extend: 'Ext.data.Model',
fields: ['symbol', 'name']
});


function createGrid() {
var store = Ext.create('Ext.data.Store', {
model: 'DataObject',
data: []
});


store.add({ 'symbol': 'IBM', 'name': 'IBM, inc.' });
store.add({ 'symbol': 'GOOG', 'name': 'GOOG, inc.' });
store.add({ 'symbol': 'IBM', 'name': 'IBM, inc.' });
store.add({ 'symbol': 'GOOG', 'name': 'GOOG, inc.' });
store.add({ 'symbol': 'IBM', 'name': 'IBM, inc.' });
store.add({ 'symbol': 'GOOG', 'name': 'GOOG, inc.' });
store.add({ 'symbol': 'IBM', 'name': 'IBM, inc.' });
store.add({ 'symbol': 'GOOG', 'name': 'GOOG, inc.' });
store.add({ 'symbol': 'IBM', 'name': 'IBM, inc.' });
store.add({ 'symbol': 'GOOG', 'name': 'GOOG, inc.' });
store.add({ 'symbol': 'IBM', 'name': 'IBM, inc.' });
store.add({ 'symbol': 'GOOG', 'name': 'GOOG, inc.' });


return Ext.create('Ext.grid.Panel', {
store: store,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop'
}
},
columns: [
{
text: 'symbol',
dataIndex: 'symbol',
flex: 1
},
{
text: 'name',
dataIndex: 'name',
flex: 1
}
]
});
}


Ext.onReady(function () {
var window = Ext.create('Ext.window.Window', {
title: 'Test',
x: 0,
y: 0,
height: 200,
width: 300,
layout: 'fit',
items: [
{
autoScroll: true,
layout: { type: 'hbox', align: 'stretchmax', manageOverflow: 2 },
items: [
{ layout: 'fit', items: createGrid(), flex: 1 }/*,
{ layout: 'fit', items: createGrid(), flex: 1 } */
]
}
],
renderTo: 'myTableContainer'
}).show();
});
</script>


<title>Ext JS Grid</title>


</head>
<body></body>
</html>

igoberman
14 Mar 2013, 10:00 AM
Just retested it with 4.2 and it seems to be fixed.