PDA

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



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

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

FF3 (firebug 1.3.0.10 installed)


Operating System:

Mac OSX (10.5)


Description:

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;
Ext.onReady(function(){

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) {
panel.getView().focusRow(23);
// 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;
if(rendered){
if(this.loadMask){
this.loadMask.destroy();
this.loadMask = new Ext.LoadMask(this.bwrap,
Ext.apply({}, {store:store}, this.initialConfig.loadMask));
}
}
if(this.view){
this.view.initData(store, colModel);
}
this.store = store;
this.colModel = colModel;
if(rendered){
this.view.refresh(true);
this.view.focusRow(0); // <- this is new
}
this.fireEvent('reconfigure', this, store, colModel);
},