PDA

View Full Version : Beginner support for remote json calls / building Stores



trebleDev
19 Apr 2011, 10:04 AM
Hi all,
Disclaimer: I'm fairly new to Sencha Touch development, and am not a senior developer by any stretch of the imagination. So please forgive my missteps and misnomers.

What I'm trying to accomplish is transition my first Touch app from being stood up with hard-coded data in a json format to calling in the same data from a remote (cross domain) source. Right now I am just displaying the resultant data as a list in a panel. Here is what I have hard-coded (and works):



Travel.listPanel = new Ext.List({
id: 'indexList',
store: Travel.ListStore,
itemTpl: '<div class="listImage" style="float:right; margin:0 10px"></div><span class="newsItem"><span class="headline">{Rank}. {Title}</span></span>',
});

Ext.regModel('listItem', {
fields: ['rank','title','author','publisher','brief','cover','weeks','weeksrank','last','entered','peak']
});

Travel.ListStore = new Ext.data.Store({
model: 'listItem',
sorters: ['rank'],
getGroupString : function(record) {
return record.get('rank');
},
data: [{"Rank":1,"Title":"Heaven is for Real","TitleAPIUrl":"/Titles/9780849946158","ISBN":"9780849946158","Author":"Todd Burpo, Sonja Burpo, Colton Burpo, Lynn Vincent","BriefDescription":"Subtitle: \"A Little Boy\u0027s Astounding Story of His Trip to Heaven and Back\" (NF) (P)","RankLastWeek":1,"Category":{"CategoryID":261,"CategoryName":"Religion/Inspiration"},"Format":{"ISBN":"9780849946158","Name":"Paperback","Publisher":"Thomas Nelson"},"Class":"NonFiction"},

{"Rank":2,"Title":"City of Fallen Angels","TitleAPIUrl":"/Titles/9781442403543","ISBN":"9781442403543","Author":"Cassandra Clare","BriefDescription":"Paranormal: Shadowhunter-in-training Clary Fray unknowingly sets in motion a chain of events that could lead to war (F) (H)","RankLastWeek":225,"Category":{"CategoryID":151,"CategoryName":"Fiction general"},"Format":{"ISBN":"9781442403543","Name":"Hardcover","Publisher":"Margaret K. McElderry"},"Class":"Fiction"},

{"Rank":3,"Title":"Water for Elephants","TitleAPIUrl":"/Titles/9781616200817","ISBN":"9781616200817","Author":"Sara Gruen","BriefDescription":"Love, drama in a circus in the 1930s (F) (E)","RankLastWeek":3,"Category":{"CategoryID":151,"CategoryName":"Fiction general"},"Format":{"ISBN":"9781616200817","Name":"E-book","Publisher":"Algonquin"},"Class":"Fiction"},

{"Rank":4,"Title":"The Fifth Witness","TitleAPIUrl":"/Titles/9780316069380","ISBN":"9780316069380","Author":"Michael Connelly","BriefDescription":"Defense attorney Mickey Haller represents a woman in foreclosure accused of killing her banker (F) (E)","RankLastWeek":0,"Category":{"CategoryID":151,"CategoryName":"Fiction general"},"Format":{"ISBN":"9780316069380","Name":"E-book","Publisher":"Little, Brown"},"Class":"Fiction"},

{"Rank":5,"Title":"Bossypants","TitleAPIUrl":"/Titles/9780316056861","ISBN":"9780316056861","Author":"Tina Fey","BriefDescription":"The comedy writer and star of 30 Rock riffs on her life and career (NF) (H)","RankLastWeek":0,"Category":{"CategoryID":251,"CategoryName":"Biography"},"Format":{"ISBN":"9780316056861","Name":"Hardcover","Publisher":"Reagan Arthur"},"Class":"NonFiction"}]
});

and here's what I'm trying to build an identical store with a call to real data:



Travel.ListStore = new Ext.data.JsonStore({
root: 'BookListEntries',
idProperty: 'id',
autoLoad:true,
fields: ['Rank', 'Title'],
proxy : new Ext.data.ScriptTagProxy({
url : 'http://localhost/bestsellers/books/ThisWeek'
}),
[
{name: 'Rank', mapping: 'Rank'},
{name: 'Title', mapping: 'Title'},
]
});


and finally, a sample of what that call above returns:



{
APIParameters: {
ISBN: ""
Year: ""
Month: ""
Date: ""
MinYear: ""
MaxYear: ""
Title: ""
Author: ""
Category: ""
Class: ""
ExcludeCurrentWeek: ""
RecentWeekAllowance: ""
Count: 0
}
BookLists: [
{
BookListEntries: [
{
Rank: 1
Title: "Heaven is for Real"
TitleAPIUrl: "/Titles/9780849946158"
ISBN: "9780849946158"
Author: "Todd Burpo, Sonja Burpo, Colton Burpo, Lynn Vincent"
BriefDescription: "Subtitle: "A Little Boy's Astounding Story of His Trip to Heaven and Back" (NF) (P)"
RankLastWeek: 1
Category: {
CategoryID: 261
CategoryName: "Religion/Inspiration"
}
Format: {
ISBN: "9780849946158"
Name: "Paperback"
Publisher: "Thomas Nelson"
}
Class: "NonFiction"
}
{
Rank: 2
Title: "City of Fallen Angels"
TitleAPIUrl: "/Titles/9781442403543"
ISBN: "9781442403543"
Author: "Cassandra Clare"
BriefDescription: "Paranormal: Shadowhunter-in-training Clary Fray unknowingly sets in motion a chain of events that could lead to war (F) (H)"
RankLastWeek: 225
Category: {
CategoryID: 151
CategoryName: "Fiction general"
}
Format: {
ISBN: "9781442403543"
Name: "Hardcover"
Publisher: "Margaret K. McElderry"
}
Class: "Fiction"
}
{
Rank: 3
Title: "Water for Elephants"
TitleAPIUrl: "/Titles/9781616200817"
ISBN: "9781616200817"
Author: "Sara Gruen"
BriefDescription: "Love, drama in a circus in the 1930s (F) (E)"
RankLastWeek: 3
Category: {
CategoryID: 151
CategoryName: "Fiction general"
}
Format: {
ISBN: "9781616200817"
Name: "E-book"
Publisher: "Algonquin"
}
Class: "Fiction"
}
{
Rank: 4
Title: "The Fifth Witness"
TitleAPIUrl: "/Titles/9780316069380"
ISBN: "9780316069380"
Author: "Michael Connelly"
BriefDescription: "Defense attorney Mickey Haller represents a woman in foreclosure accused of killing her banker (F) (E)"
RankLastWeek: 0
Category: {
CategoryID: 151
CategoryName: "Fiction general"
}
Format: {
ISBN: "9780316069380"
Name: "E-book"
Publisher: "Little, Brown"
}
Class: "Fiction"
}
{
Rank: 5
Title: "Bossypants"
TitleAPIUrl: "/Titles/9780316056861"
ISBN: "9780316056861"
Author: "Tina Fey"
BriefDescription: "The comedy writer and star of 30 Rock riffs on her life and career (NF) (H)"
RankLastWeek: 0
Category: {
CategoryID: 251
CategoryName: "Biography"
}
Format: {
ISBN: "9780316056861"
Name: "Hardcover"
Publisher: "Reagan Arthur"
}
Class: "NonFiction"
}],

BookListDate: {
Year: "2011"
Month: "4"
Date: "14"
BookListAPIUrl: "BookLists/2011/4/14"
}
Name: "Top 150"}]}


I'm unclear of whether I need a callback function to process what's returned to make it available as a store, or if the store declaration itself can handle everything (as I've attempted above).

Thanks in advance for any guidance the more seasoned Sencha developers can provide.

Cheers,
Rob

bweiler
19 Apr 2011, 11:55 AM
Normally the stores have a reference to the model in the store definition.

If you don't use autoload in the store definition, then you will need to call the store load method to load the data.

You can also put the proxy in the model, but your way will work as well.

Note the model below will not work for cross-domain. You need to use the script tag just as you are already doing.




MyApp.stores.MyStore = new Ext.data.Store({

model: 'MyApp.models.MyModel'
autoLoad: true
});


Ext.regModel('MyApp.models.MyModel', {

fields: ['num', 'desc', 'status'],

proxy: new Ext.data.AjaxProxy({
url: myUrl
reader: 'json',
})
});