PDA

View Full Version : [4.0.1] Cell Editor XY incorrect when shown on top of WebGL window in Chrome



wsi2
27 May 2011, 1:44 PM
Bug
When activating a grid cell editor on top of a window with a WebGL canvas, the cell editor's XY coordinates are incorrect in Chrome.

Environment
OS: Windows 7 Professional SP1 x64
ExtJS: 4.0.1
Browsers:
Google Chrome 11.0.696.71
Firefox 4.0.1
Internet Explorer 9.0.8112.16421 (WebGL not supported)
Safari 5.0.5 (7533.21.1) (WebGL not supported on PC version)
Opera 11.11 (Build 2109) (WebGL not supported)


Steps to reproduce:

Download the attached zip (26313) and extract the WebGL files.
Include the following WebGL setup code in the HTML HEAD.


<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="webgl-demo.js"></script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

varying vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec4 vColor;

void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>


Run the code below in Chrome.


Ext.onReady(function(){
var canvas = Ext.create('Ext.panel.Panel', {
id: "webgl-canvas",
autoEl: {
tag: 'canvas'
},
width: 150,
height: 150
});

var win = Ext.create('Ext.window.Window', {
title: 'window with canvas',
width: 300,
height: 300,
renderTo: Ext.getBody().createChild(),
items: [
canvas
],
x: 0,
y: 0
});
win.show();

Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'col1',
type: 'string'
},
{
name: 'col2',
type: 'float'
},
{
name: 'col3',
type: 'string'
}
]
});

var data = [];
for (var i = 1; i < 20; i++) {
data.push({
col1: 'row' + i + '-col1',
col2: i,
col3: 'row' + i + '-col3'
})
}

var store = Ext.create('Ext.data.Store', {
model: 'MyModel',
data: data
});

var columns = [
{
text: 'Col 1',
dataIndex: 'col1',
width: 100,
field: {
xtype: 'textfield'
}
},
{
text: 'Col 2',
dataIndex: 'col2',
width: 100,
field: {
xtype: 'numberfield'
},
align: 'right'
},
{
text: 'Col 3',
dataIndex: 'col3',
flex: 1,
field: {
xtype: 'textfield'
}
},
];

var selModel = Ext.create('Ext.selection.RowModel', {});

var editor = Ext.create('Ext.grid.plugin.CellEditing',{});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody().createChild(),
store: store,
columns: columns,
selModel: selModel,
plugins: [editor],
width: 300,
height: 300
});

var win2 = Ext.create('Ext.window.Window', {
title: 'window w/o canvas',
renderTo: Ext.getBody().createChild(),
items: [grid],
x: 50,
y: 50
});
win2.show();

webGLStart();
});

Double-click any cell to activate the cell editor. Note the XY coordinates of the cell editor are incorrect.


Workaround:
Force the cell editor to re-apply the correct XY coordinates in Chrome.


Ext.override(Ext.grid.CellEditor, {
onShow: function() {
this.callOverridden();

if (Ext.isChrome) {
Ext.defer(function() {
var x = this.el.getX();
var y = this.el.getY();
this.el.setXY([x+1, y+1]);
this.el.setX(x);
this.el.setY(y);
}, 1, this);
}
}
});


Notes:
The cell editor renders as expected in Firefox without the workaround.
The issue does not occur in Chrome if the window containing the cell editor is moved away from the window containing the WebGL canvas.
The issue does not occur in Chrome if the WebGL canvas is animated. (Uncomment requestAnimFrame(tick); in webgl-demo.js.)
The issue occurs if the window containing the cell editor is anywhere above the window containing the WebGL canvas, not just the canvas itself.

wsi2
8 Jun 2011, 4:31 PM
The issue remains in ExtJS 4.0.2 RC3 on Chrome 12.0.742.91.

Additionally, the workaround causes a slight but noticeable flicker when repositioning under graphically intense loads such as running complex WebGL models.

spielmeister
21 May 2013, 5:25 AM
Still having that issue on Ext 4.2.0 and Chrome Version: 26.0.1410.64