Jsonp リンクを処理し、そこからデータをフェッチする sencha touch 2 MVC STORE のチュートリアルまたは例を探しています。なにか提案を ?jsonp リンクとデータを取得して操作する方法を理解する必要があります。ありがとうございます。
4 に答える
jsonp を使用したモデル、ストア、およびビューの簡単な例
jsonp がどのように見えるか。
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"}]});
この 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' }
]
}
});
店:
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'
}
}
}
});
意見:
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>'
}
});
ドキュメントには、ストアやモデルなどの個々のトピックだけでなく、sencha touch の MVC 構造を理解するための優れたチュートリアルがたくさんあることがわかりました。
MVC の詳細パート 1: http://docs.sencha.com/touch/2-0/#!/video/mvc-part-1
MVC の詳細パート 2: http://docs.sencha.com/touch/2-0/#!/video/mvc-part-2
ドキュメントには、知っておく必要があるすべてのことを説明するガイド セクションもあります。 http://docs.sencha.com/touch/2-0/#!/guide
JSONP - サーバー側に関する情報が必要な場合は 、Sencha Touch API (JSONP)を参照してください。
そこには、PHP、Java、ASP.net などの一般的なサーバー側プログラム言語の JSONP 要求を処理するためのサーバー側メソッドがあります。
PHP の場合、次のようになります。
// 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);
}
Faisal Khalid が既に述べたように、出力は次のようになります...
myCallbackName({
"message":"success",
"total":2,
"data":[
{"prename":"Bob","lastname":"example"},
{"prename":"John","lastname":"Beard"}
]
});
... senchaアプリケーション (ストア構成) でコールバック名としてmyCallbackNameを定義しました。
構成はcallbackKeyと呼ばれ、デフォルトでcallbackに設定されています。
sencha touch 2 をダウンロードして oreilly の例を見つけてください。この About パネルの Tweets ページの例では、ストアからデータをロードします (リーダーのタイプは jsonp です)。また、touchtweets、geocongress、navigationview などの別の例も確認する必要があります。これが開始するのに最適な方法だと思います。