PDA

View Full Version : the list is not populated with data from server



lukesayaw
11 Oct 2010, 9:55 PM
hi,

When I run the application, I received the error as follows:

"Ext.data.JsonReader.getResponseData: Unable to parse JSON returned by Server."

The codes are:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
Ext.regModel('AllDestinations', {
fields: [{ name: 'CountryID', type: 'int' }, { name: 'Region', type: 'string'}]
});



var locationsStore = new Ext.data.JsonStore({
model: 'AllDestinations',
autoLoad: true,
getGroupString: function (record) {
return record.get('datum');
},
proxy:
{
type: "ajax",
url: 'http://localhost:56484/webservices/AllDestinationsService.asmx/GetAllDestinations',
reader: {
type: 'json',
root: ''
}
},
storeID:'locationstore'

});

var destinations = new Ext.List({
store: locationsStore,
tpl: '<tpl for="."><div class="menu"><strong>{Region}</strong><div><string style="display:none"">{CountryID}</strong></div></div></tpl>',
itemSelector: 'div.menu',
singleSelect: true,
grouped: true,
indexBar: true,
store: locationsStore,
listeners: {
"itemtap": function (dataview, index, element, evt) {

}
}
});

var pnl = new Ext.Panel({
fullscreen: true,
floating: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: destinations
});
}
});

The json data:


<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">{"" : [{"CountryID" : "6","Region" : "QUEENSLAND"},{"CountryID" : "6","Region" : "NEW SOUTH WALES"},{"CountryID" : "6","Region" : "VICTORIA"},{"CountryID" : "6","Region" : "SOUTH AUSTRALIA"},{"CountryID" : "6","Region" : "TASMANIA"},{"CountryID" : "6","Region" : "WESTERN AUSTRALIA"},{"CountryID" : "6","Region" : "NORTHERN TERRITORY"},{"CountryID" : "6","Region" : "ACT"},{"CountryID" : "6","Region" : "NORFOLK ISLAND"},{"CountryID" : "6","Region" : "QUEENSLAND ISLANDS"}]}</string>

as seen in the console windows of the safari.

Thanks

evant
11 Oct 2010, 10:00 PM
Exactly what it says. What you have returned isn't valid JSON. Why on earth is it wrapped in an XML block?!

lukesayaw
12 Oct 2010, 3:34 PM
Hi,

I was able to run the application with no error but the list is not loaded with the data returned from the server. I could only see a blank page.

The code:

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
Ext.regModel('AllDestinations', {
fields: [{ name: 'CountryID', type: 'int' }, { name: 'Region', type: 'string'}]
});



var locationsStore = new Ext.data.JsonStore({
model: 'AllDestinations',
autoLoad: true,
autoDestroy: true,
storeID:'locationstore',
proxy:
{
type: "ajax",
url: 'json.txt',
reader: {
type: 'json',
IdProperty:'CountryID'
}
}

});

var destinations = new Ext.List({
store: locationsStore,
tpl: '<tpl for="."><div class="menu"><strong>{Region}</strong><div><string style="display:none"">{CountryID}</strong></div></div></tpl>',
itemSelector: 'div.menu',
singleSelect: true,
listeners: {
"itemtap": function (dataview, index, element, evt) {

}
}
});

this.pnl = new Ext.Panel({
fullscreen: true,
floating: true,
layout: {
type: 'hbox',
align: 'stretch'
},
dockedItems: [destinations]
});
}
});

The json(json.txt):

[{"CountryID":6,"Region":"QUEENSLAND"},{"CountryID":6,"Region":"NEW SOUTH WALES"},{"CountryID":6,"Region":"VICTORIA"},{"CountryID":6,"Region":"SOUTH AUSTRALIA"},{"CountryID":6,"Region":"TASMANIA"},{"CountryID":6,"Region":"WESTERN AUSTRALIA"},{"CountryID":6,"Region":"NORTHERN TERRITORY"},{"CountryID":6,"Region":"ACT"},{"CountryID":6,"Region":"NORFOLK ISLAND"},{"CountryID":6,"Region":"QUEENSLAND ISLANDS"}]


Thank you

steve1964
13 Oct 2010, 8:38 AM
Try to set the height property of the list...

lukesayaw
13 Oct 2010, 2:53 PM
Hi,

I solved that problem but I have got another problem. I added a list to a customformpanel as an xtype and bind the list with the json data. But the list was not bounded with json data. I could only see a blank screen.Please help!

The code:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
Ext.regModel('AllDestinations', {
fields: [{ name: 'CountryID', type: 'int' }, { name: 'Region', type: 'string'}]
});

this.locationsStore = new Ext.data.JsonStore({
model: 'AllDestinations',
autoLoad: true,
autoDestroy: true,
storeID: 'locationstore',
proxy:
{
type: "ajax",
url: 'json.txt',
reader: {
type: 'json',
IdProperty: 'CountryID'
}
}

});


this.pnl = new Ext.CustomFormPanel({
fullscreen: true,
cls:'launchscreen',
layout :'card' ,
items: [
{
xtype: 'fieldset',
title: 'All Destinations',
scope: this,
labelAlign: 'left',
items: [{

xtype: 'list',
fullscreen: true,
tpl: '<tpl for="."><div class="menu"><strong>{Region}</strong><div><string style="display:none"">{CountryID}</strong></div></div></tpl>',
itemSelector: 'div.menu',
singleSelect: true,
store: this.locationsStore

}]
}]
});
}
});

The json:

[{"CountryID":6,"Region":"QUEENSLAND"},{"CountryID":6,"Region":"NEW SOUTH WALES"},{"CountryID":6,"Region":"VICTORIA"},{"CountryID":6,"Region":"SOUTH AUSTRALIA"},{"CountryID":6,"Region":"TASMANIA"},{"CountryID":6,"Region":"WESTERN AUSTRALIA"},{"CountryID":6,"Region":"NORTHERN TERRITORY"},{"CountryID":6,"Region":"ACT"},{"CountryID":6,"Region":"NORFOLK ISLAND"},{"CountryID":6,"Region":"QUEENSLAND ISLANDS"}]

Thanks for your help again.

evant
13 Oct 2010, 3:00 PM
So don't use a CustomFormPanel.... ;)

You didn't post it, so it's difficult to say.

lukesayaw
13 Oct 2010, 3:06 PM
OK, no worries. I just solved the problem myself.Thanks anyway.

lukesayaw
13 Oct 2010, 3:07 PM
yes, that's true. so I replaced with the panel and it works wells.Thanks.

lukesayaw
13 Oct 2010, 6:19 PM
Hi,

I have got an interesting questions. I created a class called AllDestinations with the namespace QuickbedAPI.views. This class was called from another class called index. I added the list as an x-type to the panel and bind the list with the json data. But the list is not loaded with data. Anything wrong. Please help!



The codes:



//the panel that contains all destinations
QuickbedsAPI.views.AllDestination = Ext.extend(Ext.CustomFormPanel, {

cls: 'launchscreen',
fullscreen: true,
layout: 'card',
dock: 'center',
scope: this,
activeItem: 0,
initComponent: function () {
Ext.regModel('AllDestinations', {
fields: [{ name: 'CountryID', type: 'int' }, { name: 'Region', type: 'string'}]
});

// Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>')
QuickbedsAPI.alldestinations = new Ext.data.JsonStore({
model: 'AllDestinations',
autoLoad: true,
autoDestroy: true,
storeID: 'locationstore',
proxy:
{
type: "ajax",
url: 'json.txt',
reader: {
type: 'json',
IdProperty: 'CountryID'
}
}
});



QuickbedsAPI.views.AllDestination.superclass.initComponent.call(this);
},

items: [
{
xtype: 'fieldset',
title: '',
scope: this,
labelAlign: 'center',
items: [{
xtype: 'list',
height: 400,
width: 300,
align: 'center',
scroll: 'vertical',
tpl: '<tpl for="."><div class="menu"><strong>{Region}</strong><div><string style="display:none"">{CountryID}</strong></div></div></tpl>',
itemSelector: 'div.menu',
singleSelect: true,
store: QuickbedsAPI.alldestinations

}]


}]

});

Ext.reg('AllDestinations', QuickbedsAPI.views.AllDestination);

evant
13 Oct 2010, 6:22 PM
Think about the order in which you're doing it. You assign the store to the fieldset before the store is ever created.



//the panel that contains all destinations
QuickbedsAPI.views.AllDestination = Ext.extend(Ext.CustomFormPanel, {

cls: 'launchscreen',
fullscreen: true,
layout: 'card',
dock: 'center',
scope: this,
activeItem: 0,
initComponent: function(){
Ext.regModel('AllDestinations', {
fields: [{
name: 'CountryID',
type: 'int'
}, {
name: 'Region',
type: 'string'
}]
});

// Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>')
this.store = new Ext.data.JsonStore({
model: 'AllDestinations',
autoLoad: true,
autoDestroy: true,
storeID: 'locationstore',
proxy: {
type: "ajax",
url: 'json.txt',
reader: {
type: 'json',
IdProperty: 'CountryID'
}
}
});

Ext.apply(this, {
items: [{
xtype: 'fieldset',
title: '',
scope: this,
labelAlign: 'center',
items: [{
xtype: 'list',
height: 400,
width: 300,
align: 'center',
scroll: 'vertical',
tpl: '<tpl for="."><div class="menu"><strong>{Region}</strong><div><string style="display:none"">{CountryID}</strong></div></div></tpl>',
itemSelector: 'div.menu',
singleSelect: true,
store: this.store

}]
}]
});
QuickbedsAPI.views.AllDestination.superclass.initComponent.call(this);
}
});

Ext.reg('AllDestinations', QuickbedsAPI.views.AllDestination);

lukesayaw
13 Oct 2010, 6:27 PM
so how or where should i create the store. Pls give me some suggestions. I hv been trouble shooting this a day already. Thanks

evant
13 Oct 2010, 6:35 PM
There is an example in the previous post...

lukesayaw
13 Oct 2010, 6:39 PM
so where or how should I populate the store first.pls help!

evant
13 Oct 2010, 6:45 PM
I don't understand, I posted a modified version of your code. That's how you should do it.

lukesayaw
13 Oct 2010, 6:54 PM
I tried your codes.it works. Thanks so much.