Ext JS Combobox not loading first time - combobox

Question

I am using an Ext JS combobox within a JSP. The first time I load the page, the combox box does not get displayed.
I see an error in my Firebug console that the associated store is not defined. (TypeError: cpStore is undefined)
I noticed, however, that the next requests work fine.
Please suggest what I could do to avoid this problem.
function displayCPBox(idPrefix){
var cpSelectList = Ext.create ('Ext.data.JsonStore', {
storeId: idPrefix+'cpSelectStore',
remoteSort: true,
autoLoad: true,
proxy: {
type: 'ajax',
url: proyecto + 'extjs/data/cpData.jsp',
reader: {
type: 'json',
root: 'data',
idProperty: 'id'
}
},
fields: [
{name:'id', type: 'float'},
{name:'codigo', type: 'string'}
]
});
var multiCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'CP',
renderTo: idPrefix+'cpSelectCombo',
id: idPrefix + 'cpSelectComboBox',
displayField: 'codigo',
valueField : 'id',
width: 200,
labelWidth: 50,
store: cpSelectList,
queryMode: 'remote',
minChars: 1,
cls : 'cp-margin',
listeners :{
select: function( combo, records, eOpts ){
getZipInfoForCodigoFormFields(records,document.getElementById(idPrefix+'localidad') ,document.getElementById(idPrefix+'provincia'),document.getElementById(idPrefix+'pais'),doc ument.getElementById(idPrefix+'zona'));
}
}
});
}
Code for setting the value during load:
var cpStore = Ext.data.StoreManager.lookup('<%=idPrefix%>'+'cpSelectStore');
cpStore.on('load',function() {
<%
Long zipCodeForDisplayLong = oportunidad.getId_lib_cp();
long zipCodeForDisplay = (zipCodeForDisplayLong == null) ? -1 : zipCodeForDisplayLong.longValue();
%>
var selectedzipCodeValue= <%=zipCodeForDisplay %>;
if(selectedzipCodeValue != -1)
{
var selectedCPVal = cpStore.findRecord("id",selectedzipCodeValue);
Ext.getCmp('<%=idPrefix%>'+'cpSelectComboBox').setValue(selectedCPVal.get("id"));
}
});
cpStore.load();

Answer 1

If you having scoping issues I feel bad for you son...
You should pass in the scope as a parameter to the function
cpStore.on('load', function(cpStore), this {
...cpStore.findRecord()
});
and now cpStore is your store reference.
I did find it kind of odd that you're setting your listener for the store at that point. Not sure where you're actually creating the store, but I feel this is probably a lot cleaner:
var cpStore = Ext.create('Path.to.store.class');
cpStore.on({
load: this.onCpStoreLoad,
scope: this
});
onCpStoreLoad: function(cpStore) {
}