PDA

View Full Version : no data loading



Robert82
17 Oct 2009, 5:54 AM
Hello,
I am going crazy - I need your help.
If I try to copy the grid examples, I get no data in the grid. It doesn't matter if I use a JSON or XML-files.

What is my problem? :s

mjlecomte
17 Oct 2009, 1:40 PM
Check Grid FAQ. Are you hitting your page via webserver?

Robert82
18 Oct 2009, 12:01 AM
I have read the FAQ, but my problem isn't solved.

My php file with the json is located on my local webserver (xampp), but the application is in an folder outside of the xampp.

I want to load the json Store in a Grid, which is in a panel which is hold by an window.
The Grid code looks like the following:


initComponent: function(){

var config = {

store: new Ext.data.JsonStore({
autoload: true,
storeId: 'myDocStore',
proxy: new Ext.data.HttpProxy({url: 'http://localhost/rest/test.php'}),
root: 'props',
idProperty: 'First name',
fields:['First name','Last name','E-Mail']
}),

columns:[{
header:'DocTitle',width:200,dataIndex:'First name'
}]
,viewConfig:{forceFit:true}


}; //eo config

The Grid fires the following events: beforeRender, Render,AfterRender, AfterLayout

I see the Header, but no data.

adibhagra
18 Oct 2009, 2:12 AM
you haven t specified the reader within the grid config.

Animal
18 Oct 2009, 2:48 AM
What debugging have you done?

Robert82
18 Oct 2009, 3:11 AM
why do I need a JsonReader? The online examples work without an Reader. :s

What debugging?
I get nothing from firebug - no error when i load the grid.

Animal
18 Oct 2009, 3:13 AM
No. You need a Reader to create Records from raw data. That is the job of a Reader.

What about using Firebug to looking at what the loaded data looks like? That's "debugging" too!

Debugging doesn't just mean seeing an error message and then posting a question here!

Robert82
18 Oct 2009, 3:23 AM
ok, i read about the reader in the api and have changed my code like this:

store: new Ext.data.JsonStore({
autoload: true,
storeId: 'myDocStore',
proxy: new Ext.data.HttpProxy({url: 'http://localhost/rest/test.php'}),
reader: new Ext.data.JsonReader({
root: 'props',
idProperty: 'First name',
fields:['First name','Last name','E-Mail']
})

}),

But the same problem.

After I took a look in firebug and set a breakpoint at the store init, I didn't recognize the store in firebug, but after some steps I get a variable q with "exception".

Where can I see the content of the store?

mjlecomte
18 Oct 2009, 4:53 AM
Grid FAQ mentions checking load/exception listeners, have you done that? Which one fires?

mjlecomte
18 Oct 2009, 4:56 AM
You do not need to explicitly define a reader when you use JsonStore because a JsonReader is implicitly created by the way.

You should also post the response you see from your server that you can see from firebug console to show the json data packet that came back.

mjlecomte
18 Oct 2009, 4:58 AM
Also check if you need to use ScriptTagProxy if your page is making request to a different domain.

Robert82
18 Oct 2009, 5:01 AM
Yes, I have added these listeners, but no one is fired.

After I take a look around in firebug, I saw an Exception string when I call

proxy: new Ext.data.HttpProxy({url: 'http://localhost/rest/test.php'})

Robert82
18 Oct 2009, 5:08 AM
my php files looks as the follows

<?php
echo '{"props":[
{
"First name":"John",
"Last name":"Smith",
"E-mail":"jsmith@smith.com"
}
]}'
?>

and is located in my xampp htdocs folder. When I open this in the browser, it looks fine.

Animal
18 Oct 2009, 5:10 AM
ok, i read about the reader in the api and have changed my code like this:

store: new Ext.data.JsonStore({
autoload: true,
storeId: 'myDocStore',
proxy: new Ext.data.HttpProxy({url: 'http://localhost/rest/test.php'}),
reader: new Ext.data.JsonReader({
root: 'props',
idProperty: 'First name',
fields:['First name','Last name','E-Mail']
})

}),

But the same problem.

After I took a look in firebug and set a breakpoint at the store init, I didn't recognize the store in firebug, but after some steps I get a variable q with "exception".

Where can I see the content of the store?#

You have not read fully.

Show the JSON. From Firebug.

Unless it looks like:



{
props: [
{ 'First name': 'Fred', 'E-Mail': 'fred@fred.com'}
]
}


Then it's not going to work.

jay@moduscreate.com
18 Oct 2009, 5:16 AM
you haven t specified the reader within the grid config.


The GridPanel doesn't need the reader. Furthermore, the JsonStore is a convenience class to take care of that for us. Look at the source, you'll see what i mean.

jay@moduscreate.com
18 Oct 2009, 5:16 AM
does the JSON Specification allow for spaces for properties?

Robert82
18 Oct 2009, 5:17 AM
In Firebug I get no JSON object when I try this with a URL. Only when I hardcode it in the js file.

The only thing I get in Firebug is an "exception" string when the DOMhelper is called after the proxy attribute.

jay@moduscreate.com
18 Oct 2009, 5:19 AM
try removing the spaces from the names. so "First Name" becomes "FirstName"

Robert82
18 Oct 2009, 5:21 AM
I have removed the spaces, but no loading. Only the "exception" string by the breakpoint


<?php
echo '{props:[
{
'Firstname':"John",
'Lastname':"Smith",
'Email':"jsmith@smith.com"
}
]}'
?>




store: new Ext.data.JsonStore({
autoload: true,
storeId: 'myDocStore',
proxy: new Ext.data.HttpProxy({url: 'http://localhost/rest/test.php'}),
root: 'props',
idProperty: 'Firstname',
fields:['Firstname','Lastname','Email']

}),

columns:[{
header:'DocTitle',width:200,dataIndex:'Firstname'
}]

jay@moduscreate.com
18 Oct 2009, 5:23 AM
You don't need to create a proxy directly:

replace with the following

url: 'http://localhost/rest/test.php',

jay@moduscreate.com
18 Oct 2009, 5:24 AM
The following PHP is invalid

Your single quotes are incorrect.





<?php
echo '{props:[
{
'Firstname':"John",
'Lastname':"Smith",
'Email':"jsmith@smith.com"
}
]}'
?>

Robert82
18 Oct 2009, 5:28 AM
Nothing has changed after url replacement

Robert82
18 Oct 2009, 5:32 AM
I have changed the PHP code, but nothing happens



<?php
echo '{props:[
{
"Firstname":"John",
"Lastname":"Smith",
"Email":"jsmith@smith.com"
}
]}'
?>

jay@moduscreate.com
18 Oct 2009, 5:34 AM
OK, visit the URL directly via the browser. Does it return text? The PHP is *STILL* invalid. you need to close the code sentence via a semi-colon.

If you need to learn PHP, i suggest doing that before learning JavaScript and Ext JS.

mjlecomte
18 Oct 2009, 5:35 AM
Post more complete code showing your listeners. Either the load or the exception listener will fire, if neither do then you've done something wrong.

Robert82
18 Oct 2009, 5:36 AM
the output in the browser:

{props:[ { "Firstname":"John", "Lastname":"Smith", "Email":"jsmith@smith.com" } ]}

this seems correct. I closed the echo command with a semi-colon - a little mistake.
But nothing happens in the grid

jay@moduscreate.com
18 Oct 2009, 5:39 AM
Paste the following in firebug:



var data = {props:[ { "Firstname":"John", "Lastname":"Smith", "Email":"jsmith@smith.com" } ]};

var store = new Ext.data.JsonStore({
data : data,
autoLoad : true,
root : 'props',
fields : [ 'Firstname' ]
});


store.data.each(function(r) {
console.info(r.get('Firstname'));
});

Animal
18 Oct 2009, 5:39 AM
Step by step., The grid's not important. The Store is.

Is the Store loaded with your Records?

jay@moduscreate.com
18 Oct 2009, 5:39 AM
The above works perfectly. If the XHR does not fire correctly in your code, or you don't get any data from the request, you're going to have to debug what is going on in your environment.

Robert82
18 Oct 2009, 5:40 AM
my js class for the grid with the listeners:


Ext.ns("App");
App.MyGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function(){
var config = {

store: new Ext.data.JsonStore({
autoload: true,
storeId: 'myDocStore',
url: 'http://localhost/rest/test.php',
root: 'props',
idProperty: 'Firstname',
fields:['Firstname','Lastname','Email']

}),

columns:[{
header:'DocTitle',width:200,dataIndex:'Firstname'
}]
,viewConfig:{forceFit:true}


}; // eo config

// apply config
Ext.apply(this, Ext.apply(this.initialConfig,config));
// call superclass
App.MyGrid.superclass.initComponent.apply(this,arguments);


this.getStore().on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
},
scope:this
},
'loadexception':{
//consult the API for the proxy used for the actual arguments
fn: function(obj, options, response, e){
console.info('store loadexception, arguments:', arguments);
console.info('error = ', e);
},
scope:this
}
});

} // eo initComponent

});
Ext.reg('mygrid', App.MyGrid);

jay@moduscreate.com
18 Oct 2009, 5:40 AM
Step by step., The grid's not important. The Store is.

Is the Store loaded with your Records?

Exactly! so many people focus on the UI when things go awry that they don't think about what *feeds* it.

Robert82
18 Oct 2009, 5:44 AM
your code works perfect, but when I use the url the store is not loaded.

What have I to set up in my enviroment? I have installed XAMPP.

jay@moduscreate.com
18 Oct 2009, 6:02 AM
Great question. I use Apache + PHP (custom compiled) for my machine.
http://brammofan.files.wordpress.com/2009/07/i-dunno-lol.jpg

Robert82
18 Oct 2009, 6:10 AM
What changes have I to do in the Apache or PHP?
I can change this independently from XAMPP

jay@moduscreate.com
18 Oct 2009, 6:13 AM
What does the request look like in firebug? do you get a 200?

Robert82
18 Oct 2009, 6:21 AM
I have no request in firebug. Under XHR is no entry and also wenn I show "all".

Robert82
18 Oct 2009, 6:25 AM
i tried out the following in my main js file to check the XHR



var ds = new Ext.data.JsonStore({
autoload:true,
url: 'http://localhost/rest/test.php',
root: 'props',
idProperty: 'Firstname',
fields:['Firstname','Lastname','Email']
});

ds.load();


With the ds.load() statement I get a 200 request, but without I get nothing
The 200 request is empty

jay@moduscreate.com
18 Oct 2009, 6:25 AM
Are you viewing the page via an HTTP call?? http://someHost/yourPage.html ??

also, try this in firebug:


OK, try this. Paste this in firebug:



var store = new Ext.data.JsonStore({
url : 'http://localhost/rest/test.php',
autoLoad : true,
root : 'props',
fields : [ 'Firstname' ],
listeners : {
load : function(s) {
s.data.each(function(r) {
console.info(r.get('Firstname'));
});
},
exception : function() {
console.error('Something failed!')
}
}
});

jay@moduscreate.com
18 Oct 2009, 6:26 AM
i tried out the following in my main js file to check the XHR



var ds = new Ext.data.JsonStore({
autoload:true,
url: 'http://localhost/rest/test.php',
root: 'props',
idProperty: 'Firstname',
fields:['Firstname','Lastname','Email']
});

ds.load();


With the ds.load() statement I get a 200 request, but without I get nothing
The 200 request is empty


Pay attention to your code :).

autoLoad means - "Automatically load", thus you need not call ds.load();

Robert82
18 Oct 2009, 6:32 AM
I know that autoload means automatically, but I was wonder that there is no request.

I open my index.html with file:///C:/Users/.../WebContent/index.html, but I can try to open the index.html within the webserver folder htdocs.

With your code I get the message "something failed"


anonymous()demo.js (Zeile 109)anonymous({ scope=Object options=Object })ext-all.js (Zeile 7)anonymous([{ scope=Object options=Object } 0=Object], function(), { name=E })ext-base.js (Zeile 7)anonymous()ext-all.js (Zeile 7)anonymous()ext-all.js (Zeile 7)anonymous()ext-all.js (Zeile 7)anonymous({ scope=Object options=Object })ext-all.js (Zeile 7)anonymous([{ scope=Object options=Object } 0=Object], function(), { name=E })ext-base.js (Zeile 7)anonymous()ext-all.js (Zeile 7)anonymous()ext-all.js (Zeile 7)anonymous({ request=Object reader=Object scope=Object }, { name=d value=false }, { tId=0 status=0 statusText=communication failure })ext-all.js (Zeile 7)d({ tId=0 status=0 statusText=communication failure }, { name=o })ext-all.js (Zeile 7)f({ tId=0 }, { scope=Object argument=Object timeout=30000 }, { name=r }, { name=q })ext-base.js (Zeile 7)anonymous()

</div>

jay@moduscreate.com
18 Oct 2009, 6:32 AM
no, you need to open it with a web request: http://, not file:// !!

jay@moduscreate.com
18 Oct 2009, 6:33 AM
*Farking s p a m* tool!

you need to use http instead of file

Robert82
18 Oct 2009, 6:39 AM
after the use of http instead of file I get a response with the json data with your code - yeah

but when I use my old code, I don't get anything

Robert82
18 Oct 2009, 6:41 AM
I found the problem :)

I used autoload instead of autoLoad - now is the store filled and displayed in the grid


a BIG THANKS for your help

jay@moduscreate.com
18 Oct 2009, 6:51 AM
Yes, javascript is Case sensitive ;)