Question

我正在寻找一个关于sencha touch 2 MVC STORE的教程或示例，它处理Jsonp链接并从那里获取数据，仅限MVC BASE。我需要了解存储，模型，控制器和视图如何在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)

在那里，您可以找到服务器端方法来处理常见服务器端程序语言（如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);
}

正如费萨尔哈立德所说，输出看起来像......

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

...您已将 myCallbackName 定义为sencha应用程序（商店配置）中的回调名称。

配置名为 callbackKey ，默认设置为回调。

Sencha touch 2 MVC Store

4 个答案: