PDA

View Full Version : problem with updating panel with json data



Shiki
6 Dec 2010, 11:49 AM
I've retrieved successfuly json from a json test server (http://demo.webfactory.mk), taking in consideration the work around ajax problem with different hosts. But now, I have problem loading the data in the panel. Interesting enough, the same code works if i insert static (inline defined) json and update the panel, but it doesn't work if i update the panel from the callback function with the retrieved json. Any help will be highly appreciated. Here is the code:


itemInfo = new Ext.XTemplate(
'<ul>',
'<tpl for=".">',
'<li>{name}</li>',
'</tpl>',
'</ul>'
);
content = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
tpl: itemInfo
});


Ext.util.JSONP.request({
url: 'http://demo.webfactory.mk/',
callbackKey: 'callback',
params: {

action: 'retrieve'
},
callback: function(data) {

data = data.result;
content.update(data);

}
});

[edit] Also I want to add, when i log the data in the console, it has same result, no matter if it is from the remote server or the inline code.

Fredric Berling
6 Dec 2010, 12:16 PM
Are you in the right scope when you are in the callback function?

Shiki
6 Dec 2010, 12:38 PM
well i think i am, because this is code snippet from the actual tutorial for geotweet... i am pretty sure that i am

mrsunshine
6 Dec 2010, 2:09 PM
Try this


Ext.setup({
onReady: function() {
var itemInfo = new Ext.XTemplate(
'<ul>',
'<tpl for=".">',
'<li>{name}</li>',
'</tpl>',
'</ul>'
);
var content = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
tpl: itemInfo
});


Ext.util.JSONP.request({
url: 'http://demo.webfactory.mk/',
callbackKey: 'callback',
params: {

action: 'retrieve'
},
callback: function(data) {

data = data.result;
content.update(data);

}
});
}
});

Shiki
7 Dec 2010, 1:52 AM
It didn't solved the problem. Also, when i try to execute this code in browser I get javascript error message "WebKitPoint is not defined" but when I started on android simulator i get the panel but without data from json.

mrsunshine
7 Dec 2010, 2:04 AM
posted example above works in safari, i get a list of names from your json object which are rendered via the template.

did you have a valid html file where you include all needed files?

something like

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">

<title>List</title>
<script type="text/javascript" src="../../sencha-touch-debug.js"></script>
<script type="text/javascript" src="src/index.js"></script>
</head>
<body></body>
</html>

Shiki
7 Dec 2010, 3:55 AM
Thank you, it's working on safari and google chorme but it's not working on mozzila firefox and IE. Also when I build on Android simulator it doesn't work but I build it on the device and it's working properly:).

mrsunshine
7 Dec 2010, 3:58 AM
Sencha Touch only works on webkit based browsers like safari, safari on iphone/iPad/Android or chrom NOT on IE or Firefox.

if you want to build cross browser desktop applications use ExtJS