PDA

View Full Version : Get Value From store load() callback function



elshae
15 Feb 2011, 9:06 AM
Hello ExtJS,

I have a Ext.data.JsonStore to get the results back from a query sent to the server. I return the JSON properly, but I do not know how to handle the callback function of the load() method. I need this callback function to pass it's value past it's scope so that I can use it as the text for a label. The most I was able to do was print the value from the callback function in an alert(); I'd really appreciate help on this, as I have been stuck for sometime now...


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

var namesStore = new Ext.data.JsonStore({
url: 'tibetTestAdmin.php',
storeId: 'JsonStore',
// reader configs
root: 'results',
totalPRoperty: 'total',
baseParams: {task: "NAMES", place_group: checkedRecords[i].get('place_group'),
language_id: checkedRecords[i].get('language_id')},

fields: [{name: 'name'}, {name: 'transliteration'}]
});

namesStore.load({callback: function(otherName){otherName.push(namesStore.getAt(0).get('name')); alert(namesStore.getAt(0).get('name')//if i try otherName[0] I get undefined, but otherName[1] is ok???); return otherName;} });

checkedRecordsIds.push(checkedRecords[i].get('place_location_id'));
nameLabel = checkedRecords[i].get('name');
transliterationLabel = checkedRecords[i].get('transliteration');

placeNamesApplyForm.add(new Ext.form.Checkbox({boxLabel: nameLabel + " - " + transliterationLabel + " - " + otherName[1]//give undefined, also tried otherName[0]}));


Please note this is the relevant snippet and not all the code...

Thank you for your time,

elshae

elshae
15 Feb 2011, 10:47 AM
I just found out that when I do:


namesStore.load({callback: function(){ alert("Hey");
Ext.getCmp('placeNamesApplyForm').add(new Ext.form.Checkbox({boxLabel: nameLabel + " - " + transliterationLabel + " - " + namesStore.getAt(0).get('name') })); } });

using an alert() gives me a result, how can I do this the proper way? :(

fay
15 Feb 2011, 11:03 AM
Your logic seems way off, you can't (shouldn't?) make asynchronous load() calls from within a for loop!

1. Change your php to accept multiple 'place_group' values - param 'place_groups'.

2. Build your param value for 'place_groups' by iterating through your checkedRecords.

3. Create a single namesStore and call load(). Btw, the load method's callback function has the following signature: (records, options, success) - you should always check the success param before continuing.

4. Within the (successul) load callback, iterate through "records" creating your checkboxes with whatever values you need from records.getAt(i)...

elshae
15 Feb 2011, 12:28 PM
Thank you for your reply :). I am trying to implement your suggestions, but I am a little stuck...


var place_groups = new Array();
var language_ids = new Array();
for(var i = 0; i < checkedRecords.length; i++){
place_groups.push(checkedRecords[i].get('place_group'));
language_ids.push(checkedRecords[i].get('language_id'));

}
namesStore.baseParams = {task: "NAMES", place_groups: place_groups,
language_ids: language_ids};

namesStore.load({callback: function(){
for(var i = 0; i < checkedRecords.length; i++){
Ext.getCmp('placeNamesApplyForm').add(new Ext.form.Checkbox({boxLabel: checkedRecords[i].get('name') + " - " + checkedRecords[i].get('transliteration') + " - " + namesStore.getAt(i).get('name') }));
}} });

placeNamesApplyWindow.show();

I am not so sure how to handle the success parameter...and FireBug is telling me that namesStore.getAt(i).get('name') is undefined :(

Thanks for your consideration and help,

elshae

carl23934
15 Feb 2011, 12:46 PM
You are sort of thinking of this wrong.

Take a look at the docks for the parameters that will be passed to your callback. (http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store&member=load) The load callback is passed an array of records. You can simply iterate this array! Also, the success parameter is passed!


var place_groups = new Array();
var language_ids = new Array();
for (var i = 0; i < checkedRecords.length; i++) {
place_groups.push(checkedRecords[i].get('place_group'));
language_ids.push(checkedRecords[i].get('language_id'));

}
namesStore.baseParams = {
task: "NAMES",
place_groups: place_groups,
language_ids: language_ids
};

namesStore.load({
callback: function (records, options, success) {
if (success) {
var ct = records.length, it = 0;
while (it < ct) {
Ext.getCmp('placeNamesApplyForm').add(new Ext.form.Checkbox({
boxLabel: records[it].get('name') + " - " + records[it].get('transliteration') + " - " + records[it].get('name')
}));
it++;
}
}
}
});

placeNamesApplyWindow.show();

fay
15 Feb 2011, 1:09 PM
That's almost it, apart from the fact that the load() is asynchronous - any code after the call to load() will be run immediately... while the call is being executed!

So it should be:



namesStore.load({

// ... loop through records, add your checkboxes.

placeNamesApplyWindow.show();
});

elshae
15 Feb 2011, 1:22 PM
Thanks for your help, but unfortunately I am still having troubles...

I no longer get the undefined errors, but I do not get the desired results either. It seems there are troubles with the store load result/records...

The parameters seem to be passing properly:
language_ids1language_ids2place_groups1891place_groups1893taskNAMES
I've checked my php with fake values/static array and it worked fine. My last guess here is that callback is trying to run before the store is loaded...I'm really stumped on why this isn't working. My JSON output in FireBug is not holding the correct values from the query, but it worked fine when I used a static array so I know it's not my SQL either D:

Thank you and I would love to hear more ideas on this :)

elshae

elshae
15 Feb 2011, 1:26 PM
fay I'm not sure I understand, your saying do not use callback: but put the code directly in load({code here})? But then this means I do not have access to the (records, options, success) values?

I appreciate your help and I'm sorry for not catching on :p

elshae

fay
15 Feb 2011, 1:40 PM
I'm saying use the load() method (with the callback), but be aware that it is asynchronous. My last post was in reference to the fact that there is no point in putting a call to placeNamesApplyWindow.show() after load() - you've no idea when the load() will be finished, so it should be within the callback.

You have Firebug, put a breakpoint in the callback and debug what it is being returned from your server. Post your JSON here so we can see if it is valid.

fay
15 Feb 2011, 1:44 PM
Just realised now why you said "do not use callback", my code should have been:



namesStore.load({
callback: function (records, options, success) {

// ... loop through records, add your checkboxes.

placeNamesApplyWindow.show();
}
});

carl23934
15 Feb 2011, 1:47 PM
Fay is saying that because the .show(); function call is at the end, your window will show up, and it will be empty. After the ajax call loads the data and the callback function gets called, then the checkboxes will be added.

Additionally Fay is suggesting that you put the .show(); call inside of the ajax callback so that your window will show up AFTER the ajax callback function is called so that the window will show up with the checkboxes already in there.

This thread is officially too long.

elshae
15 Feb 2011, 2:25 PM
Really thank you so much, but I am still breaking my brain over this one...

Now it seems like something is wrong with the returned records...the JSON result does not return what I expect. The strange thing is that the parameters passed are correct and like I have mentioned before this code worked with static values I passed in a test...

task=NAMES&place_groups=1894&place_groups=1050&language_ids=2&language_ids=2

Thats the POST_ params, which are correct...could it be by any chance that the fact this is done asynchronously is what is ruining my JSON result? I'm really not understanding what could be wrong here...

Thanks so much for your continued and kind help,

elshae

elshae
15 Feb 2011, 3:07 PM
I apologize if the thread is too long...

I have narrowed down that there is something terribly wrong with how the POST_ variables are being picked up...

In javascript:

for(var i = 0; i < checkedRecords.length; i++){
place_groups.push(checkedRecords[i].get('place_group'));
language_ids.push(checkedRecords[i].get('language_id'));
}
namesStore.baseParams = {task: "NAMES", place_groups: place_groups,
language_ids: language_ids};


The variables that should be seen are
task=NAMES&place_groups=981&place_groups=1894&language_ids=1&language_ids=2
but what is actually passed to my php

$place_groups = $_POST['place_groups'];
$language_ids = $_POST['language_ids'];
is actually the number 1 like if the variables are cut-off...has anyone had this experience before?

carl23934
15 Feb 2011, 3:16 PM
Use firebug! Pepper it with console.log(); so you can see the data before and after it's sent to the server. E.G. console.log(namesStore.baseParams);

Do print_r($_POST) in PHP to see what PHP is actually seeing (sometimes firebug lies).

elshae
16 Feb 2011, 7:32 AM
It's working!!! I finally got my PHP working thanks to your wonderful print_r and console.log() suggestions ;)

I was missing some things in the JavaScript and the PHP..this wonderful link saved me here too

http://www.foscode.com/array-extjs-baseparams/

To pass the PHP array I need to add Ext.encode():


namesStore.baseParams = {task: "NAMES", place_groups: Ext.encode(place_groups),
language_ids: Ext.encode(language_ids)};

As for the PHP, I had to do a bit of "sanitizing":


$pg = $_POST['place_groups'];
$li = $_POST['language_ids'];

$pg_temp = explode(',', $pg);
$li_temp = explode(',', $li);

for ($start=0; $start < count($pg_temp); $start++){

// remove all weird characters from the item number, it leaves only letters and numbers
$place_groups[$start] = preg_replace("/[^a-zA-Z0-9s]/", "", $pg_temp[$start]);
$language_ids[$start] = preg_replace("/[^a-zA-Z0-9s]/", "", $li_temp[$start]);
}

I really am grateful for everyone's suggestions and time to help me. In all honesty, I don't think I could have ever figured this out and probably would told my boss "I can't do it" :p. Hopefully this thread will help others too!

Happy ExtJSing,

elshae

nitinlavania
6 Dec 2013, 10:12 PM
hi i am a beginner of extjs, now i am using jsonp proxy in my application.....in store i'm writing this code but i dont know wherever i have to make a callback function.proxy: { type: 'jsonp', url : 'http://blogs.walkingtree.in?autoplay=true', callbackKey: 'theCallbackFunction' }so anyone pls tell me how can I do it........