PDA

View Full Version : Asynchronous Ajax call loading the records lately



Leenu Winner
30 Sep 2011, 6:01 AM
Hi,

I want to make a call to DB and get the records into json store and want to build dynamic check box group using those records. I could get the records into an array. However due to asynchronous ajax calls, the array is getting loaded lately. Due to which the checkboxes are not getting display. Please give me a way how to get my array loaded first though ajax call and the rest of the code executes. Here is my sample code. Please help.



<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<link rel="stylesheet" type="text/css" href="/rim/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/rim/CSS/style.css" />
<script type="text/javascript" src="/rim/extjs/ext-all-debug.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script>




Ext.onReady(function(){
var checkboxItem;
var checkboxItemGroup = [];


var valuesStore = new Ext.data.JsonStore({
root : 'medias',
fields: ['media_ID', 'media_Description'],
storeId: 'mediaStore',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'selectAllMedias.html',
reader: {
type: 'json',
root: 'medias',
idProperty: 'media_ID'
}
},
listeners: {
load: function(t, records) {
t.each(function(records){
console.log(records);
checkboxItem =
{xtype: 'checkbox', name: 'mediaGroups', boxLabel: records.get('media_Description'), inputValue: records.get('media_ID')};
checkboxItemGroup.push(checkboxItem);

});
}
}
});



Ext.define('Rim.view.ui.PanelHa', {
extend: 'Ext.form.Panel',

height: 1000,
initComponent: function() {

var me = this;
me.items = [
{
xtype: 'textfield',
fieldLabel: 'name'
},
{
xtype: 'fieldset',
items: checkboxItemGroup
}


];
me.callParent(arguments);
}
});



var createDL = new Ext.create('Rim.view.ui.PanelHa');
createDL.render('createDLBody');
});
</script>
<title>Create Distributed License</title>
</head>
<body>
<div id="createDLBody"></div>
</body>
</html>

rTankersley
2 Oct 2011, 9:46 PM
var valuesStore = new Ext.data.JsonStore({
root : 'medias',
fields: ['media_ID', 'media_Description'],
storeId: 'mediaStore',
proxy: {
type: 'ajax',
url: 'selectAllMedias.html',
reader: {
type: 'json',
root: 'medias',
idProperty: 'media_ID'
}
},
});

valuesStore.load({
success: function(t, records)
{
...
}
});


I think that will work! I took out the autoLoad and instead called the load function. The success function is called when the store has finished loading, which I think is was what you were aiming for.

Hope that helps!

lucasguaru
4 Oct 2011, 10:49 AM
If the first answer didn't work...
Looks like you're adding the

{
xtype: 'fieldset',
items: checkboxItemGroup
}
to your panel, and after you push the checkboxItem.
It creates the components when you create the panel.
It's like you create the panel with an empty array then you add the items to the array.
What I think you have to do is create the fieldset "Ext.create..." before your json store.
On you load event you add the checkboxItem into the fieldset. Not like an array but with the add method I guess it has.
Another way is create the panel after the store loads, with the array created with the checkboxItems.