View Full Version : [CLOSED] [Ext 4.2.x] Grid Editing and Internet Explorer 9 (in compatibility mode and not)

18 Apr 2013, 9:08 AM

Ext version tested:

Ext 4.2.0
Ext 4.2.1 Beta
Browser versions tested against:

FF 19
Chrome 26

Using IE9 (or previous) when a grid in more large than its container, in editing mode it is rendered wrong: the scroll returns to the beginning of the row and the right side of the grid becomes gray (half of data becomes invisible!). There is a similar problem also with RowEditing.
In ExtJs 4.1.x it worked perfectly.
Steps to reproduce the problem:

Create a Grid (larger than its container) with CellEditing plugin
Test Case:

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'email2', 'phone'],
{"name":"Lisa", "email":"lisa@simpsons.com", "email2":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "email2":"bart@simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "email2":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "email2":"marge@simpsons.com", "phone":"555-222-1254"}
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', width: 250, editor: 'textfield'},
{header: 'Email', dataIndex: 'email', width: 250, editor: 'textfield'},
{header: 'Confirm Email', dataIndex: 'email2', width: 250, editor: 'textfield'},
{header: 'Phone', dataIndex: 'phone', width: 200}
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
height: 200,
width: 400,
renderTo: Ext.getBody()

Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

Win 7 Pro (SP1)

18 Apr 2013, 10:06 AM
Thanks for the report! I have opened a bug in our bug tracker.