exception reconfiguring gridpanel using a grouping view

[zerovian]

Ext JS Version 3.2.1

I have a gridpanel on another panel for which I periodically need to reconfigure with a new store and a new column model. If this gridpanel is configured with a grouping view then when the load of the store is finished, i get an exception in the 'refresh' method of the gridpanel. If I remove the grouping view from the grid, then I can safely reconfigure the grid without exceptions.

Here is the exception as reported from Chrome (firefox, ie, safari, chrome all report it):

ext-all-debug.js:44568 Uncaught TypeError: Cannot call method 'stopEditing' of undefined

This isn't the exact code, but its close.

			

var url = "...";

var userProxy = new Ext.data.HttpProxy( {
	url : url,
	restful : true
});

var reader = new Ext.data.JsonReader( {
	root : 'users',
	fields : [ 'name', 'id']
});

var store = new Ext.data.GroupingStore( {
	reader : reader,
	autoSave : false,
	proxy : userProxy
});

var cm = new Ext.grid.ColumnModel( {
	defaults : {
		width : 120,
		sortable : true
	},
	columns : [ {
		header : "User Id",
		dataIndex : 'id'
	}, {
		header : 'User Name',
		dataIndex : 'name'
	} ]
});


var grid = new Ext.grid.GridPanel( {
	forceLayout : true,
	itemId : 'grid',
	height : 200,
	store : store,
	colModel : cm,
	sm : new Ext.grid.RowSelectionModel( {
		singleSelect : true
	}),
	viewConfig : {
		forceFit : true
	},
	view : new Ext.grid.GroupingView( {
		forceFit : true,
		groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Users" : "User"]})'
	})
});


// some time later this gets called
...
var oldStore = grid.getStore();
var store = this.createStore();
var cm = this.createColumnModel();
grid.reconfigure(store, cm);
store.load();
if (oldStore) {
  oldStore.deestroy();
}

The appropaite code from ext-all-debug.js is here:

   
 refresh : function(headersToo){
        this.fireEvent('beforerefresh', this);
        this.grid.stopEditing(true);   // it blows up on this line because this.grid is undefined

        var result = this.renderBody();
        this.mainBody.update(result).setWidth(this.getTotalWidth());
        if(headersToo === true){
            this.updateHeaders();
            this.updateHeaderSortState();
        }
        this.processRows(0, true);
        this.layout();
        this.applyEmptyText();
        this.fireEvent('refresh', this);
    },

[Condor]

"some time later this gets called"... When exactly? Has the grid already been rendered?

[jleblanc]

I know this is an old thread, but I've just encountered the same problem. Is this a bug in ExtJS?