View Full Version : [OPEN-1002] GridPanel reconfigure should refocus view to correct scroller height

27 May 2010, 12:41 PM
Ext version tested:

Ext 3.2.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

FF3 (firebug installed)

Operating System:

Mac OSX (10.5)


If a GridPanel is first configured with a store containing many records and then reconfigured with a store containing few records, the view's scroller height will not be properly updated if the view has a focusEl before calling panel.reconfigure.

Test Case:

var grid, bigStore, lilStore;

bigStore = new Ext.data.ArrayStore({
data: "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(","),
fields: ["letter"]

lilStore = new Ext.data.ArrayStore({
data: "a,b,c,d".split(","),
fields: ["letter"]

grid = new Ext.grid.GridPanel({
title: "Grid reconfigure issue",
renderTo: "grid-example",
store: bigStore,
columns: [
{id: "letter", header: "Letter", width: 160, sortable: true, dataIndex: "letter"}
stripeRows: true,
autoExpandColumn: "letter",
height: 250,
width: 200,
listeners: {
afterrender: {
fn: function(panel) {
// expect to see the view refreshed with proper scroller height
panel.reconfigure(lilStore, panel.getColumnModel());
// scroller height is incorrect at this point
buffer: 1 // after afterrender


Steps to reproduce the problem:

Replace the examples/array-grid.js with the above code.
Open the array-grid.html example.

The result that was expected:

I'd expect to see the records from the lilStore after reconfiguring the GridPanel

The result that occurs instead:

The GridPanel's view is scrolled improperly based on previous focusEl.

Possible fix:

The GridPanel's reconfigure method could call focusRow on the view after refreshing the view. The code below fixes the problem for me when used to override reconfigure.

reconfigure : function(store, colModel){
var rendered = this.rendered;
this.loadMask = new Ext.LoadMask(this.bwrap,
Ext.apply({}, {store:store}, this.initialConfig.loadMask));
this.view.initData(store, colModel);
this.store = store;
this.colModel = colModel;
this.view.focusRow(0); // <- this is new
this.fireEvent('reconfigure', this, store, colModel);