Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    33
    Vote Rating
    3
    wsi2 is on a distinguished road

      1  

    Post [4.0.1] Cell Editor XY incorrect when shown on top of WebGL window in Chrome

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


    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:
    1. Download the attached zip (webgl.zip) and extract the WebGL files.
    2. Include the following WebGL setup code in the HTML HEAD.
      Code:
      <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>
    3. Run the code below in Chrome.
      Code:
      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();
      });
    4. 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.
    Code:
    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.

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    33
    Vote Rating
    3
    wsi2 is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    1
    Vote Rating
    0
    spielmeister is on a distinguished road

      0  

    Default


    Still having that issue on Ext 4.2.0 and Chrome Version: 26.0.1410.64

Thread Participants: 1

Tags for this Thread