PDA

View Full Version : JSON example other than the twitter example



ClintPick
16 Jul 2010, 11:24 AM
I've tried to get the twitter JSON list store example to work. Unfortunately geolocation doesn't work so well in South Africa. Would it be possible to show a basic example of the JSON list store using a static JSON file?

evant
18 Jul 2010, 9:12 PM
You can modify the list example:



var store = new Ext.data.Store({
autoLoad: true,
proxy: {
url: 'data.json',
type: 'ajax',
reader: 'json'
},
model: 'Contact',
sorters: 'firstName',

getGroupString: function(record){
return record.get('firstName')[0];
},
});


data.json contains:



[
{"firstName": "Tommy", "lastName": "Maintz"},
{"firstName": "Ed", "lastName": "Spencer"},
{"firstName": "Jamie", "lastName": "Avins"}
]

ClintPick
20 Jul 2010, 12:01 PM
Thanks Evant. Unfortunately I can't get it to work right. My script looks as follows:



Ext.setup({

icon: 'icon.png',
glossOnIcon: false,
onReady:function(){

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});



var store = new Ext.data.Store({
autoLoad: true,
proxy: {
url: 'data.json',
type: 'ajax',
reader: 'json'
},
model: 'Contact',
sorters: 'firstName',

getGroupString: function(record){
return record.get('firstName')[0];
},
});

var demo = new Ext.Panel({
fullscreen: true,
scroll:'vertical',

items: [{
xtype: 'list',
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true,
store: store
}]
});


}


});

I get the following error:

TypeError: Result of expression 'this.proxy.setModel' [undefined] is not a function.

evant
20 Jul 2010, 5:52 PM
I copied your code exactly and it loads the list without any problem:



Ext.setup({

icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.Store({
autoLoad: true,
proxy: {
url: 'data.json',
type: 'ajax',
reader: 'json'
},
model: 'Contact',
sorters: 'firstName',

getGroupString: function(record){
return record.get('firstName')[0];
},
});

var demo = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',

items: [{
xtype: 'list',
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true,
store: store
}]
});


}
});


Response:


[
{"firstName": "Tommy", "lastName": "Maintz"},
{"firstName": "Ed", "lastName": "Spencer"},
{"firstName": "Jamie", "lastName": "Avins"}
]

ilanb
21 Jul 2010, 12:10 AM
Hello Evant,

I have the same problem: no list

I use same script and data.json file.

I have tested on MAC OSX 10.6.4 with safari Version 5.0 (6533.16) and Ipad/iphone simulator (xcode) and no list, no data

Can you put your src files ? maybe a error in my data.json...

thx

evant
21 Jul 2010, 1:27 AM
That's all that I'm using. I dropped the code in the list example and created the data file with the json above, it's an ~exact~ copy.

ilanb
21 Jul 2010, 1:53 AM
Ok but not for me:-?

file used: json.zip

thx

evant
21 Jul 2010, 2:22 AM
You need to be running it through a web server if you aren't doing so already.

ilanb
21 Jul 2010, 2:25 AM
I use MAMP Pro and virtualHostX... all other demos work fine;)

evant
21 Jul 2010, 2:32 AM
Check it's not throwing errors at any point.

ClintPick
21 Jul 2010, 8:38 AM
I saw on another thread that the error I'm getting might be a bug:
http://www.sencha.com/forum/showthread.php?102119-Difficulty-to-load-a-JsonStore

If it's not too much trouble, could you please use the following in the example you posted earlier?


new Ext.data.Store({
model: 'MyModel',
proxy: new Ext.data.HttpProxy({
reader: {
type: 'json',
root: 'someRoot'
}
})
})

ilanb
21 Jul 2010, 10:08 AM
I try this but same:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

autoLoad: true,
proxy: new Ext.data.HttpProxy ({
url: 'data.json',
reader: {
type: 'json'
}
}),

getGroupString : function(record) {
return record.get('firstName')[0];
},
});
};

if (!Ext.platform.isPhone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
width: 350,
height: 350,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
}
}
});

ClintPick
23 Jul 2010, 12:09 AM
ilanb,

I tried the code you posted in my setup and it ran, but no names from the json file were shown, just the alphabeti index bar that normally appears on the right-hand-side. Any luck on your side?

ilanb
23 Jul 2010, 12:16 AM
Hi ClintPick,

no more luck on my side...
I tried many things without success

Maybe someone could post a valid example ?:-?

danvega
23 Jul 2010, 7:24 AM
Evan are you using some other build? I dropped this code in and I have the exact some problem ?

firebug
this.proxy.setModel is not a function

Chrome Developer tools
Uncaught TypeError: Object #<an Object> has no method 'setModel'
if (this.proxy && this.model) {
this.proxy.setModel(this.model);
}


I was searching the forums because I have the same problem on another list. Is there something I am missing?



this.topics = new Ext.List({
id:'topicsList',
fullscreen:true,
tpl:'<tpl for="."><div class="topic"><strong>{name}</strong></div></tpl>',
singleSelect:true,
itemSelector:'div.topic',
dockedItems: [this.topicsTitlebar],
store: new Ext.data.Store({
autoLoad:true,
model: 'Topic',
groupField: 'name',
proxy: {
type: 'scripttag',
url:'http://abc.com/topics.json'
}
})
});

danvega
23 Jul 2010, 5:16 PM
OK - Found the issue at least on my end. After I made that comment I took a look to make sure I was on the latest version and I was not. I was using 0.9 and the current version is 0.91 so anyone else having the issue please check for that.

ilanb
24 Jul 2010, 7:34 AM
:">:">:">:">:">:((:((:((:((:">:">:">:">:">

thx ~o)

ClintPick
25 Jul 2010, 9:40 AM
Thanks Dan and Evant. It seems I had an older version aswell. The battle continues. Evant, any idea when the next release will be?