Sencha touch 2 MVC商店

Question

我正在尋找教程或sencha touch 2的例子MVC STORE處理Jsonp鏈接並從那裏獲取數據，只有MVC BASE。我需要了解Store，Model，Controller和View如何交互彼此以MVC爲基礎的結構。任何建議？我需要了解如何獲取和使用jsonp鏈接和數據，謝謝

Answer 1

下載sencha touch 2並找到oreilly示例。在「關於」面板「推文」頁面中的此示例中，將從商店中加載數據（閱讀器類型爲jsonp）。此外，你應該檢查像touchtweets，geocongress，navigationview等另一個例子。 我認爲這是開始的最佳途徑。

Answer 2

我發現該文檔有很多關於理解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

Answer 3

模型，存儲和查看使用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>' 

} 

}); 

Answer 4

如果需要了解有關JSONP的一些信息 - 服務器端，然後看看到 the Sencha Touch API (JSONP)

在那裏你可以找到服務器端的方法來處理你的JSONP請求，用於通用服務器端程序語言，如PHP，Java或ASP.net。

對於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); 
} 

正如費薩爾·哈立德已經說了，輸出會看起來像......

myCallbackName({ 
    "message":"success", 
    "total":2, 
    "data":[ 
      {"prename":"Bob","lastname":"example"}, 
      {"prename":"John","lastname":"Beard"} 
      ] 
}); 

...你已經定義 myCallbackName作爲sencha應用程序中的回調名稱（商店配置）。

該配置被稱爲callbackKey並且默認設置爲回調。