Sencha touch 2 MVC Store - extjs

Question

Im looking for a tutorial or an example for sencha touch 2 MVC STORE which deals with Jsonp link and fetches data from there, ONLY MVC BASE .I need to learn how Store, Model, Controller and View interact with each other in MVC based structure . any suggestion ? between I need to understand how to fetch and work with jsonp links and datas, Thanks

Answer 1

Download sencha touch 2 and find oreilly example. In this example in About panel Tweets page loads data from store (reader type is jsonp). Also you should check another examples like touchtweets, geocongress, navigationview etc.
I think it's the best way for start.

Answer 2

I have found the documentation has a lot of good tutorials on understanding sencha touch's MVC structure, as well as each individual topics like stores and models.
MVC in depth part 1:
http://docs.sencha.com/touch/2-0/#!/video/mvc-part-1
MVC in depth part 2:
http://docs.sencha.com/touch/2-0/#!/video/mvc-part-2
The docs also have a guide section that goes over everything that you need to know too.
http://docs.sencha.com/touch/2-0/#!/guide

Answer 3

A simple example of model,store and view using jsonp
How jsonp looks like.
callback({"Message":"Success","Post":[{"id":"35","UserId":"faisalkhalid690","Content":"lol","Time":"2013-12-03 05:28:15"},{"id":"50","UserId":"faisalkhalid","Content":"asdfasdfasdf","Time":"2013-12-03 05:52:27"},{"id":"51","UserId":"faisalkhalid","Content":"sadfasdfasdf","Time":"2013-12-03 05:52:38"},{"id":"52","UserId":"faisalkhalid","Content":"holloa","Time":"2013-12-03 05:52:50"},{"id":"70","UserId":"faisalkhalid690","Content":"hello","Time":"2013-12-04 23:22:52"}]});
Model for this jsonp.
Ext.define('talkbag.model.Comments', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'auto' },
{ name: 'UserId', type: 'auto' },
{ name: 'Content', type: 'auto' },
{ name: 'Time', type: 'auto' }
]
}
});
Store:
Ext.define('talkbag.store.Comments', {
extend:'Ext.data.Store',
storeId:'Comments',
config:{
autoLoad: true,
model:'talkbag.model.Comments',
proxy: {
type: 'jsonp',
url : 'http://www.litemake.com/ViewComments.php?Pid='+talkbag.User.PostId,
reader: {
type: 'json',
rootProperty: 'Post'
}
}
}
});
View:
Ext.define('talkbag.view.ViewPost.ViewCommentDetail', {
xtype:'ViewCommentDetail',
extend:'Ext.dataview.List',
config:{
store:'Comments',
itemTpl:'<table><tr><td width="80px"><table align="center"><tr><td align="center"><img src="http://www.litemake.com/getPic.php?userId={UserId}" heigth="30px" width="30px"/></td></tr><tr><td style="font-size:0.6em">{UserId}</td></tr></table></td><td style="padding-left:20px"><table><tr><td style="font-size:0.7em; padding:0px 0px 5px 0px">{Content}</td></tr><tr><td style="font-size:0.5em">{Time}</td></tr></table></td></tr></table>'
}
});

Answer 4

If you need some information about JSONP - Server Side, then have a look to
the Sencha Touch API (JSONP)
There you can find serverside methods to handle your JSONP request for common server side programm languages like PHP, Java or ASP.net.
For PHP it would look like this:
// From your Sencha JSONP Store, you will get a callback parameter which we
// need to put in our $callback var, for later usage.
$callback = $_REQUEST['callback'];
// Create the output object.
// this could also be a database output, but remember to
// convert it into an array
$output = array('a' => 'Apple', 'b' => 'Banana');
// start output
// this section switches between a jsonp callback or usual json output.
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
As Faisal Khalid already said, the output will look like...
myCallbackName({
"message":"success",
"total":2,
"data":[
{"prename":"Bob","lastname":"example"},
{"prename":"John","lastname":"Beard"}
]
});
... where you've defined myCallbackName as the callback name in your sencha application (store configuration).
The config is called callbackKey and is set to callback by default.