PDA

View Full Version : Nestedlist from external JSON location



binadit
2 Feb 2011, 3:39 PM
Hello everyone,

I'm building an iPhone app that needs to load json data from a php file from an external server but I can only make it work locally because ajax proxy only can connect to local files.

Is it possible to use a scripttag proxy (or something else) to load the json data from an external website, and if so, please tell me how.

This is my nestedlist code




Ext.regModel('Dagtip', {
fields: [
{name: 'text', type: 'string'},
{name: 'title', type: 'string'},
{name: 'url', type: 'string'},
{name: 'img', type: 'string'}

]
});


var store = new Ext.data.TreeStore({
model: 'Dagtip',
proxy: {
type: 'ajax',
url: 'dagtip.json',
reader: {
type: 'tree',
root: 'items'
}
}
});

var NestedList = new Ext.NestedList({
store: store,
title: 'Twing! dagtip',
displayField: 'text',
getTitleTextTpl: function(node) {
return '<div style="text-align:right; margin-right:5px;">{text}</div>';
},
getItemTextTpl: function(node) {
return '<tpl if="leaf != true">'+
' <div style="float:left;padding-right:10px;"><img width="60" height="60" src="{img}<tpl if="img.length == 0">images/icon.png</tpl>" /></div>{title}'+
'</tpl>'+
'<tpl if="leaf == true">'+
'<div style="text-align:center;"><img style="width:90%;max-width:400px;" src="http://www.twing.nl/images/dagtip/{img}<tpl if="img.length == 0">images/icon.png</tpl>" /></div><br >'+
'<div style="color: #376daa;">{title}</div><br >'+
'<div style="text-align:justify;">{text}</div><br ><p></p><a target="blank" href="{url}">{url}</a></tpl>';
}
});


This is example of json data:



{"text": "Dagtips","items": [
{
"title": "De aller beste online foto bewerker van dit moment!",
"img": "best-free-phone-editor.gif",
"text": "02-02-2011",
"items": [{
"title": "De aller beste online foto bewerker van dit moment!",
"text": "pixlr is een gratis online foto bewerker. De ontwikkeling van deze soort web-editors gaat in sneltrein vaart. Zo is de ene nog niet getipt en zo is de volgende alweer beter dan de vorige. Op dit moment is pixlr in ieder geval de beste. Met alle mogelijkheden die u ook vindt in photoshop, met lagen/layers, auto levels, kontrast, duotone, filters, kleurselectie, pipeteren, gradient, enz enz enz.. En dat allemaal nog in het Nederlands of uw eigen favoriete taal ook!",
"img": "best-free-phone-editor.gif",
"url": "http://pixlr.com/editor/",
"leaf": true
}]
}
,
{
"title": "Multi chat protocol client voor Mac OSX",
"img": "adium.gif",
"text": "01-02-2011",
"items": [{
"title": "Multi chat protocol client voor Mac OSX",
"text": "Adium is multi-protocol een instant messenger (chat) client voor Mac OSX en ondersteunt o.a. AIM, MSN, Jabber,Yahoo,Gtalk,Twitter en Facebook.",
"img": "adium.gif",
"url": "http://adium.im/",
"leaf": true
}]
}
,
{
"title": "Laat pakketjes bij ophaalpunten afleveren",
"img": "kiala.gif",
"text": "31-01-2011",
"items": [{
"title": "Laat pakketjes bij ophaalpunten afleveren",
"text": "Kiala is een service waarmee pakketten bij een servicepunt afgeleverd worden. Voor sommige online webwinkels is discretie of anonimiteiteen pre. Bijvoorbeeld omdat de huisgenoten van de klant liever niet het pakket in ontvangst mogen nemen. In dit geval kan een Kiala site koppeling gemaakt worden. De klant kan er dan voor kiezen om zijn pakket daar te laten afleveren. Hierdoor blijft de klant anoniem en kan hij het pakket discreet ophalen. De service is ook makkelijk voor mensen die nooit thuis zijn. Zo kan het pakket op ieder gewenst moment bij het servicepunt opgehaald worden.",
"img": "kiala.gif",
"url": "http://www.kiala.nl/",
"leaf": true
}]
}
,
{
"title": "Test uw internet snelheid met leuke grafische interface",
"img": "speedtest.gif",
"text": "30-01-2011",
"items": [{
"title": "Test uw internet snelheid met leuke grafische interface",
"text": "Speedtest.net controleert de snelheid van uw huidige internet verbinding. Zo heeft u snel een indicatie wat de in de praktijk behaalde snelheid van uw Internet Service Provider abonnement van het huidige moment is. Een Nederlandse site, www.speedtest.nl , is ook beschikbaar. De opzet van deze site is minder speels, maar functioneel minstens even goed.",
"img": "speedtest.gif",
"url": "http://www.speedtest.net/",
"leaf": true
}]
}
,
{
"title": "Een server voor alle denkbare communicatie",
"img": "elastix.gif",
"text": "29-01-2011",
"items": [{
"title": "Een server voor alle denkbare communicatie",
"text": "Alle communicatiestromen met elkaar combineren en allemaal over dezelfde server, dat is Elastix!\r\nOf het nu gaat om IP-verkeer, voice-over-ip, Instant messanging, faxen of collaboratie. Deze linux software kan het allemaal aan!",
"img": "elastix.gif",
"url": "http://www.elastix.org/",
"leaf": true
}]
}
,
{
"title": "Windows Folders beveiligd met wachtwoord en encryptie opslaan",
"img": "axcrypt.gif",
"text": "28-01-2011",
"items": [{
"title": "Windows Folders beveiligd met wachtwoord en encryptie opslaan",
"text": "AxCrypt is een hulpmiddel om een map in Windows met een wachtwoord te beveiligen. Het encrypten en beveiligen met wachtwoord is mogelijk door met de rechtermuisknop op bestanden of mappen te klikken. Daarna kan een wachtwoord opgegeven worden. Alleen met dit wachtwoord is de informatie nog beschikbaar. Voor de rest is de informatie door niets of niemand meer te lezen.",
"img": "axcrypt.gif",
"url": "http://www.axantum.com/axcrypt/",
"leaf": true
}]
}
,
{
"title": "Maak een spetterende video van je foto's",
"img": "create-trailer-from-images.jpg",
"text": "27-01-2011",
"items": [{
"title": "Maak een spetterende video van je foto's",
"text": "Animoto maakt automatisch een spetterende video montage van uw eigen foto's en muziek. Er zijn verschillende stijlen mogelijk. De gratis variant heeft een beperking van 30 seconden. Bekijk de showcase om een indruk te krijgen van de mogelijkheden: http://animoto.com/showcase .",
"img": "create-trailer-from-images.jpg",
"url": "http://animoto.com/",
"leaf": true
}]
}
,
{
"title": "iDeal en credit card betalingen zonder maandelijkse kosten",
"img": "multisafepay.gif",
"text": "26-01-2011",
"items": [{
"title": "iDeal en credit card betalingen zonder maandelijkse kosten",
"text": "Multisafepay biedt als een van de weinige partijen iDeal & creditcard betalingen aan, zonder dat daar maandelijkse kosten aan verbonden worden. De betaling geschiedt dan wel via de portaal van Multisafepay, maar als webwinkel eigenaar zit u niet vast aan vaste maandelijkse kosten. De betalingen kunnen ook volledig geïntegreerd met de webshop plaatsvinden, maar dan worden er wel maandelijkse kosten gerekend (connect). Net als met Paypal werkt Multisafepay met een tijdelijke online rekening. Geld moet handmatig met overschrijvingen naar uw bankrekening overgeschreven worden. Uw klanten dienen zich te registreren bij MultiSafePay, maar vervolgens kunnen zij volledig anoniem online betalingen uitvoeren.",
"img": "multisafepay.gif",
"url": "http://www.multisafepay.com/nl/Home-zakelijk/",
"leaf": true
}]
}
,
{
"title": "Hulpprogramma's en ActiveX voor het verwerken van Clieop03",
"img": "clieop03-converter.gif",
"text": "25-01-2011",
"items": [{
"title": "Hulpprogramma's en ActiveX voor het verwerken van Clieop03",
"text": "Nederlandse banken werken met Clieop03 bestanden voor het automatisch verwerken van grote aantallen transacties. Op deze pagina zijn hulpprogramma's te vinden voor het converteren en bewerken van de Clieop03 bestanden. Binnen het Clieop03 Tools pakket is een C++ bibliotheek beschikbaar voor de integratie van Clieop03 in applicaties. Verder is er een ActiveX beschikbaar.",
"img": "clieop03-converter.gif",
"url": "http://clieop03tools.sourceforge.net/",
"leaf": true
}]
}
,
{
"title": "Applicatie voor het ontwikkelen van web applicaties",
"img": "aptana-studio.gif",
"text": "24-01-2011",
"items": [{
"title": "Applicatie voor het ontwikkelen van web applicaties",
"text": "Aptana Studio is een standalone applicatie voor Mac, Windows en Linux voor de ontwikkeling van web toepassingen. Het product is toegespitst op het programmeren van HTML, CSS en Javascript. Met alle denkbare javascript bilbliotheken en een fatsoenlijke javascript debugger geïntegreerd komt ook de javascript specialist aan zijn trekken. Verder zijn (FTP) bestandssynchronisatie en een DOM object overzicht onderdeel van de ontwikkelingsapplicatie (IDE).",
"img": "aptana-studio.gif",
"url": "http://www.aptana.com/studio",
"leaf": true
}]
}
,
{
"title": "25 gratis geweldige lettertypes bij Smashing magazine",
"img": "fontfontsfonts-font.gif",
"text": "23-01-2011",
"items": [{
"title": "25 gratis geweldige lettertypes bij Smashing magazine",
"text": "Smashing magazine presenteert 25 mooie, maar wat minder allerdaagse lettertypes. De site biedt veel meer lettetypes, staan hier: http://www.smashingmagazine.com/category/font . Omdat de lettertypes gratis zijn kunnen ze ook zonder probleem als webfont worden gebruikt.",
"img": "fontfontsfonts-font.gif",
"url": "http://www.smashingmagazine.com/2010/12/17/25-new-free-high-quality-fonts-typography/",
"leaf": true
}]
}
,
{
"title": "Google sitemap met PHP genereren",
"img": "php-sitemap-generator.gif",
"text": "22-01-2011",
"items": [{
"title": "Google sitemap met PHP genereren",
"text": "phpSitemapNG is een php script voor het maken van een Google xml sitemap bestand van een bepaalde website. De zoekmachine prefereert zo'n bestand op een website, zodat van te voren duidelijk is wat de bestandsstructuur van een bepaalde website is. Het script maakt ook sitemaps in RSS of HTML.",
"img": "php-sitemap-generator.gif",
"url": "http://enarion.net/tools/phpsitemapng/",
"leaf": true
}]
}
,
{
"title": "Ajax-server-side enabled web server/service",
"img": "jaxer.jpg",
"text": "21-01-2011",
"items": [{
"title": "Ajax-server-side enabled web server/service",
"text": "Jaxer is een Ajax/javascript bibliotheek die server en client side op de web server draait. Door deze combinatie is het mogelijk vanuit de server een client side proces te starten. Een goed voorbeeld hiervan is de chat applicatie die als test case op de site staat beschreven: http://jaxer.org/tutorials/chat .",
"img": "jaxer.jpg",
"url": "http://jaxer.org/",
"leaf": true
}]
}
,
{
"title": "Facebook 'Lightbox' voor jQuery en MooTools",
"img": "faxebox.gif",
"text": "20-01-2011",
"items": [{
"title": "Facebook 'Lightbox' voor jQuery en MooTools",
"text": "LightFace is de door David Walsh ontwikkelde Facebook-lightbox-achtige uitbreiding voor de javascript bibliotheek MooTools. Lol kan dus niet op voor liefhebbers van MooTools en de Facebook lightbox oplossing. Ook voor jQuery is een uitbreiding gemaakt. Deze heet Facebox en is hier te vinden: http://chriswanstrath.com/facebox/ .",
"img": "faxebox.gif",
"url": "http://davidwalsh.name/facebook-lightbox",
"leaf": true
}]
}
,
{
"title": "Webapp voor het afspelen van uw afbeeldingen, video's en muziek",
"img": "ampache.jpg",
"text": "19-01-2011",
"items": [{
"title": "Webapp voor het afspelen van uw afbeeldingen, video's en muziek",
"text": "Ampache is een open source PHP/MySQL webapplicatie waarmee video's, muziek en afbeeldingen online afgespeeld kunnen worden.",
"img": "ampache.jpg",
"url": "http://ampache.org/",
"leaf": true
}]
}
,
{
"title": "Online facturatiesysteem voor Nederlandse bedrijven",
"img": "wefact.gif",
"text": "18-01-2011",
"items": [{
"title": "Online facturatiesysteem voor Nederlandse bedrijven",
"text": "Wefact is een web portal ten behoeve van facturatie. Via een beveiligde website kunnen kleine bedrijven en MBK hun facturatie, klanten,producten, BTW-aangifte en betalingen op orde houden. Voor een kleine maandelijkse vergoeding is het administratiesysteem voor iedereen binnen handbereik. Laat u inspireren en bekijk de online demo.",
"img": "wefact.gif",
"url": "http://standard.wefact.nl/",
"leaf": true
}]
}
,
{
"title": "Online pictogrammen maken",
"img": "online-icon-editor.gif",
"text": "17-01-2011",
"items": [{
"title": "Online pictogrammen maken",
"text": "Micrsoft heeft een tool ontwikkeld om iconen te maken. Pictogrammen kunnen online gemaakt en bewerkt worden en het ico bestand kan uiteindelijk worden gedownload.",
"img": "online-icon-editor.gif",
"url": "http://ie.microsoft.com/testdrive/Browser/IconEditor/",
"leaf": true
}]
}
,
{
"title": "Drupal 7 is daar",
"img": "drupal7.gif",
"text": "16-01-2011",
"items": [{
"title": "Drupal 7 is daar",
"text": "Drupal is een van de meest populaire content managment systemen ter wereld. Sinds kort is versie 7 uitgebracht met een verbeterde gebruikers - en database interface. Daarnaast is het CMS geoptimaliseerd voor het gebruik met enterprise.",
"img": "drupal7.gif",
"url": "http://drupal.org/drupal-7.0",
"leaf": true
}]
}
,
{
"title": "Controle paneel voor Openvz",
"img": "proxmox.gif",
"text": "15-01-2011",
"items": [{
"title": "Controle paneel voor Openvz",
"text": "Proxmox een control panel voor het beheer van OpenVZ. Het uitermate goed gebruikt worden voor het bouwen van uitgebreide cluster systemen. Proxmox biedt tevens onderhoudscontracten. Getipt door: nuleurohosting.nl .",
"img": "proxmox.gif",
"url": "http://www.proxmox.com/",
"leaf": true
}]
}
,
{
"title": "Gratis online backup toepassing",
"img": "spideroak.gif",
"text": "14-01-2011",
"items": [{
"title": "Gratis online backup toepassing",
"text": "SpiderOak is tot 1 GB aan dataopslag helemaal gratis. De online toepassing voor het maken van backups is veilig en de software die nodig is voor het maken van de backups is beschikbaar voor Mac en Windows.",
"img": "spideroak.gif",
"url": "https://spideroak.com/",
"leaf": true
}]
}
]}

What I want is that my script can load the json data from this address: http://www.twing.nl/etc/dagtip-api/json.php?f=latest

I really hope you people can help me out, I'm reading/searching and trying for over 8 hours now...

binadit
3 Feb 2011, 12:57 AM
No one that knows the answer to my problem, or am I asking the impossible?