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并且默认设置为回调。