Loading initial configuration data on extjs - extjs

Question

need your help on the following problem. I have an Extjs application, and I need to get some data from database at the begining of all, I mean, before everything loads (mostly views). This is because this data I need to load will be used to create a form in a specific view.
So the question is: where should I put the function that gets the data and stores it in a global variable? I tried to put that function in launch function on app.js, but the behavior is weird (sometimes loads the data before the view renders, and sometimes does it after).
Please see above the code:
Function that gets the data (placed in App.js and invoked inside launch function):
cargarItemsEvaluacion: function()
{
AppGlobals.itemsCargarFormEvaluacion = [];
Ext.Ajax.request(
{
url : 'app/proxy.evaluacion.php',
method: 'GET',
params :{
act: 'getEvalItemsForm'
},
success : function(response)
{
var obj = Ext.decode(response.responseText);
Ext.each(obj.results, function(item)
{
//console.log(item);
var tempItem = {
xtype: 'container',
layout: 'anchor',
flex: 1,
items: [
{
//xtype: 'fieldset',
title: item.nombre,
items: [
{
id: 'item_'+item.id,
xtype: 'textfield',
fieldLabel: item.descripcion,
name: 'item_'+item.id,
allowBlank: false,
blankText: 'Este campo es obligatorio',
maskRe: /^[0-9]{1}/,
maxLenght: 2,
validateOnChange: 'true',
emptyText: 'Nota (1 al 10)',
submitEmptyText: false,
validator: function(value)
{
if(value.length>2 || value>10)
{
return 'Complete con nota del 1 al 10';
}
var stringPad=/^[1-9]{1}[0-9]{0,1}/;
if (!stringPad.test(value))
{
return 'Complete con nota del 1 al 10';
}
else
{
return true;
}
}
}]
}]
};
AppGlobals.itemsCargarFormEvaluacion.push(tempItem);
});//End Ext.each
if(AppGlobals.itemsCargarFormEvaluacion.length>0)
{
var itemObservacion = {
xtype: 'container',
layout: 'anchor',
flex: 1,
items: [
{
title: 'Observaciones',
items: [
/*{
id: 'ascenso',
xtype: 'checkbox',
boxLabel: 'Recomienda ascenso',
name: 'ascenso'
},*/
{
id: 'observaciones',
xtype: 'textareafield',
grow: true,
fieldLabel: 'Agregue observaciones adicionales si lo cree necesario',
name: 'observaciones',
labelAlign: 'top'
}
]
}]
};
AppGlobals.itemsCargarFormEvaluacion.push(itemObservacion);
}
console.log(AppGlobals.itemsCargarFormEvaluacion);
},
failure: function(response)
{
var obj = Ext.decode(response.responseText);
console.log("Entra al failure "+response.responseText);
//Ext.example.msg("Error", "No se pudo comprobar si es posible cargar al evaluador. Error: "+obj.error);
}
});//End Ext.ajax
}
And this is the initComponent function on the view where I need to generate the form using the data I got from the previous function:
initComponent: function(){
var formEvaluacion = this.items[0];
if(AppGlobals.itemsCargarFormEvaluacion.length==0)
{
console.log("Data still no loaded");
}
else
{
console.log("Data loaded!");
}
console.log(AppGlobals.itemsCargarFormEvaluacion);
Ext.apply(formEvaluacion,{items: AppGlobals.itemsCargarFormEvaluacion});
this.callParent(arguments);
}
As you can see, I check if the data loads before the view renders, or after. And sometimes does it before, sometimes after...I don't know what it depends on...
Any help will be appreciated.
Mauro

Answer 1

Think I found the solution. I placed cargarItemsEvaluacion function into init function on app.js. Seem to be working so far.
Thanks!