I have an error when automatically load an Store data for a Grid and select records.

I hope somebody could help me because I tried many way of fix this and I cant...



I receive this error:

Uncaught TypeError: Cannot read property 'removeCls' of undefined



This is the context... I have 3 grids each of those have an Store and a Ext.selection.CheckboxModel. The third grid depends from de records selected (checked troght the selection checkbox model) in the second grid to load its information and after the information is loaded it marks (using the his own selection checkbox model) some records. The same happens with the second grid that depends in the first one lets say a kind of cascade where The main information comes from the user having access to some countries (first grid), and based on the countries where he has access I load the information of the states that belongs to the counstries where the user has access and once the information of those states is loaded I select those states where the user has access and so on to continue with the cities.



Now the way I am using to do this is:

1) I load the information from the user where I receive the countries, states and cities that the user has access to.

2) I load the list of the countries available in the DB then based on the information of the user I select the countries where the user has access:



countryStore.load({

params: {

start: 1, limit: 20,

iEstatus: true

},

callback: function (records, operation, success) {

var arr = userContextInformation.countryList.split(','); // The list of countries where the user has access

var recordToSelect = [];

for (var i = 0; i < arr.length; i++) {

var record = countryStore.findRecord("CountryId", arr[i], 0, false, true, true);



if (record != null) {

recordToSelect.push(record);

}



}



// Then I check the ones that the user has access to

grdCountry.getSelectionModel().select(recordToSelect);

// Based on the selection I prepare the list of states that I will need to load from the database

var s = grdCountry.getSelectionModel().getSelection();

var countryList = "";



Ext.each(s, function (item) {

countryList += item.data.CountryId + ',';

});



// Then I load the second grid information and do the same thing (logic)

statesByCountryStore.load({

params: {

countryList: countryList

},

callback: function (records, operation, success) {



....

}

});



}



The problem or error tat I have comes once I load the secong grid information and begin to mark (check) its records besed on the information where the user has access.



I hope you can help me to fix or change the logic so it can work... I dont know if it is a bug in the ExtJs I tried many way to find the error without lucky.



I leave here the information that the browser is showing maybe it would help:





Uncaught TypeError: Cannot read property 'removeCls' of undefined

Ext.define.toggleUiHeader

Ext.define.onSelectChange

Ext.define.doMultiSelect

Ext.define.doSelect

Ext.define.select

(anonymous function)

Ext.util.Event.Ext.extend.fire

Ext.define.continueFireEvent

Ext.define.fireEvent

Ext.define.onProxyLoad

Ext.define.processResponse

(anonymous function)

Ext.apply.callback

Ext.define.onComplete

Ext.define.onStateChange

(anonymous function)


Thank you :D

I have an error when automatically load an Store data for a Grid and select records.