View Full Version : Ext.grid.Panel.reconfigure() display issue with horizontal scroll bar

Kouichi Odajima
5 Oct 2011, 1:04 AM
I noticed a bug on grid panel reconfigure().
Here are the details.


Ext version tested:

ExtJS 4.0.6
ExtJS 4.0.2a

Browser versions tested against:


DOCTYPE tested against:

HTML 4.01 Strict


Call Ext.grid.Panel.reconfigure() to change column count.
Display area is not refreshed when grid panel has horizontal scroll bar.

Steps to reproduce the problem:

With Test Case scripts, (Screenshot 1)
Scroll to right
Click 'Add Column' button to reconfigure()
Body area is not refreshed (Screenshot 2)
Again, scroll to right and click 'Add Column'
Header area is not refreshed (Screenshot 3)

The result that was expected:

Display area should be refreshed after reconfigure()

The result that occurs instead:

Partially refreshed
Test Case:

function createModel(modelName, count) {
var fields = new Array(count);
for (var i = 0; i < count; ++i) {
fields[i] = {
name: "data" + i,
type: "int",
defaultValue: i
Ext.define(modelName, { extend: "Ext.data.Model", fields: fields });

function createRecord(modelName, count) {
var record = Ext.create(modelName);
return record;

function createColumns(count) {
var newColumns = new Array(count);
for (var i = 0; i < count; ++i) {
newColumns[i] = {
header: "Column" + i,
dataIndex: "data" + i,
width: 60
return newColumns;

Ext.onReady(function() {
var maxColumn = 20;
createModel("SomeModel", maxColumn);
Ext.create("Ext.grid.Panel", {
width: 400,
height: 100,
store: Ext.create("Ext.data.Store", {
model: "SomeModel",
buffered: true,
data: [ createRecord("SomeModel", maxColumn) ]
autoScroll: true,
tbar: [
text: "Add Column",
handler: function(b) {
var gridPanel = b.up("gridpanel");
var newColumnCount = gridPanel.columns.length + 1;
gridPanel.reconfigure(null, createColumns(newColumnCount));
columns: createColumns(10),
renderTo: Ext.getBody()


Screenshot or Video:

Screenshot1: Test Case initial display.
Columns and cells have same number.
Screenshot2: After first reconfigure().
Scroll bar and header area are scrolled to left, body area stays.
After second reconfigure().
Header area is scrolled to left, scroll bar and body area stay.

See this URL for live test case: http://

Debugging already done:

Workaround: scrollByDeltaX(1) after reconfigure() fixes display.
Manual scroll also fixes display.

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Windows Server 2008 R2

8 Mar 2012, 2:10 AM
ops, hit the same problem with vertical scroll-bar
also fixed by the above workaround with scrollByDeltaY(1)